CSS3 border-radius 屬性

geekzhou 發(fā)布于2019-08-30 15:53 / 3309人閱讀

摘要：今天面試的時(shí)候，面試官問了一個(gè)屬性參數(shù)的問題。使用屬性，你可以給任何元素制作圓角。設(shè)置不同參數(shù)，也可以制作其他形狀的角屬性有四個(gè)值，分別對(duì)應(yīng)圖中位置圓角的半徑。此時(shí)使用號(hào)隔離，號(hào)前表示水平半徑，號(hào)后表示垂直半徑，缺省值時(shí)表示含義同上。

今天面試的時(shí)候，面試官問了一個(gè)border-radius屬性參數(shù)的問題。當(dāng)時(shí)記得不清楚，回去后便研究學(xué)習(xí)了一下。
使用 CSS3 border-radius 屬性，你可以給任何元素制作 "圓角"。（設(shè)置不同參數(shù)，也可以制作其他形狀的角）
border-radius屬性有四個(gè)值，分別對(duì)應(yīng)圖中1、2、3、4位置圓角的半徑。

當(dāng)然這些值可以缺省，具體代表意思如下：
四個(gè)值: 第一個(gè)值為1，第二個(gè)值為2，第三個(gè)值為3，第四個(gè)值為4。
三個(gè)值: 第一個(gè)值為1, 第二個(gè)值為2和4，第三個(gè)值為3
兩個(gè)值: 第一個(gè)值為1與3，第二個(gè)值為2與4
一個(gè)值： X=1=2=3=4;
上述位置1、2、3、4可以分別用border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius表示。
示例：

test {

border-radius: 35px 15px 25px;
border: 2px solid #8AC007;
padding: 20px; 
width: 100px;
height: 80px;

}

如果要畫橢圓角，就要設(shè)置border-radius水平半徑和垂直半徑不同。此時(shí)使用‘/’號(hào)隔離，‘/’號(hào)前表示水平半徑，‘/’號(hào)后表示垂直半徑，缺省值時(shí)表示含義同上。
示例：
test {

border-radius: 45px/20px;
background: #8AC007;
padding: 20px; 
width: 200px;
height: 150px;

}

云服務(wù)器 GPU云服務(wù)器 border-radius css3 css3氣泡 css3動(dòng)畫

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116546.html

相關(guān)文章

實(shí)現(xiàn)環(huán)形進(jìn)度條（CSS3+jQuery/Vue）

摘要：整體思路是通過裁切產(chǎn)生兩個(gè)半圓展示出靜態(tài)的進(jìn)度條，而后通過旋轉(zhuǎn)角度的變化產(chǎn)生動(dòng)態(tài)效果。而藍(lán)色部分元素的顏色，是我們還未到達(dá)的進(jìn)度。演示勤快的我去里寫了一下這個(gè)是的實(shí)現(xiàn)這個(gè)是的實(shí)現(xiàn)環(huán)形進(jìn)度條。參考文章利用和實(shí)現(xiàn)環(huán)形進(jìn)度條整體思路是：通過裁切（clip）產(chǎn)生兩個(gè)半圓展示出靜態(tài)的進(jìn)度條，而后通過旋轉(zhuǎn)（rotate）角度的變化產(chǎn)生動(dòng)態(tài)效果。先來回顧兩個(gè)基礎(chǔ)知識(shí)點(diǎn) （1）css的一個(gè)不常見的...

BWrong 2019-08-29 12:22 評(píng)論0 收藏0
實(shí)現(xiàn)環(huán)形進(jìn)度條（CSS3+jQuery/Vue）

摘要：整體思路是通過裁切產(chǎn)生兩個(gè)半圓展示出靜態(tài)的進(jìn)度條，而后通過旋轉(zhuǎn)角度的變化產(chǎn)生動(dòng)態(tài)效果。而藍(lán)色部分元素的顏色，是我們還未到達(dá)的進(jìn)度。演示勤快的我去里寫了一下這個(gè)是的實(shí)現(xiàn)這個(gè)是的實(shí)現(xiàn)環(huán)形進(jìn)度條。參考文章利用和實(shí)現(xiàn)環(huán)形進(jìn)度條整體思路是：通過裁切（clip）產(chǎn)生兩個(gè)半圓展示出靜態(tài)的進(jìn)度條，而后通過旋轉(zhuǎn)（rotate）角度的變化產(chǎn)生動(dòng)態(tài)效果。先來回顧兩個(gè)基礎(chǔ)知識(shí)點(diǎn) （1）css的一個(gè)不常見的...

lidashuang 2019-08-21 15:32 評(píng)論0 收藏0
實(shí)現(xiàn)環(huán)形進(jìn)度條（CSS3+jQuery/Vue）

摘要：整體思路是通過裁切產(chǎn)生兩個(gè)半圓展示出靜態(tài)的進(jìn)度條，而后通過旋轉(zhuǎn)角度的變化產(chǎn)生動(dòng)態(tài)效果。而藍(lán)色部分元素的顏色，是我們還未到達(dá)的進(jìn)度。演示勤快的我去里寫了一下這個(gè)是的實(shí)現(xiàn)這個(gè)是的實(shí)現(xiàn)環(huán)形進(jìn)度條。參考文章利用和實(shí)現(xiàn)環(huán)形進(jìn)度條整體思路是：通過裁切（clip）產(chǎn)生兩個(gè)半圓展示出靜態(tài)的進(jìn)度條，而后通過旋轉(zhuǎn)（rotate）角度的變化產(chǎn)生動(dòng)態(tài)效果。先來回顧兩個(gè)基礎(chǔ)知識(shí)點(diǎn) （1）css的一個(gè)不常見的...

charles_paul 2019-08-01 16:36 評(píng)論0 收藏0
CSS3 邊框

摘要：邊框用，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計(jì)程序，如。在本章中，您將了解以下的邊框?qū)傩詧A角在中添加圓角棘手。 CSS3 邊框用 CSS3，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計(jì)程序，如 Photoshop。在本章中，您將了解以下的邊框?qū)傩裕?border-radius box-shadow border-image CSS3 圓角在 ...

Charles 2019-08-29 13:25 評(píng)論0 收藏0
CSS3 border-radius妙用

摘要：分解出來就是以左上角為例子小例子屬性允許您為元素添加圓角邊框效果總結(jié)可以用畫一些復(fù)雜的效果圖，下面鏈接大神畫的小豬佩奇，真是無所不能。 border-radius：左上右上右下左下（就是順時(shí)針）如果沒有4個(gè)值的情況下，缺的那個(gè)角的值與對(duì)角相等（如2、3、4） 1、border-radius: 2em;( border-radius: 2em 2em 2em 2em;) 等價(jià)于...

andycall 2019-08-29 15:25 評(píng)論0 收藏0