CSS3 border-radius 屬性

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

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

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

當(dāng)然這些值可以缺省，具體代表意思如下：
四個值: 第一個值為1，第二個值為2，第三個值為3，第四個值為4。
三個值: 第一個值為1, 第二個值為2和4，第三個值為3
兩個值: 第一個值為1與3，第二個值為2與4
一個值： 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水平半徑和垂直半徑不同。此時使用‘/’號隔離，‘/’號前表示水平半徑，‘/’號后表示垂直半徑，缺省值時表示含義同上。
示例：
test {

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

}

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116546.html

相關(guān)文章

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

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

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

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

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

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

charles_paul 2019-08-01 16:36 評論0 收藏0
CSS3 邊框

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

Charles 2019-08-29 13:25 評論0 收藏0
CSS3 border-radius妙用

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

andycall 2019-08-29 15:25 評論0 收藏0