border-radius是一種縮寫(xiě)的格式,可以細(xì)分成很多單獨(dú)的:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-right-radius
如果你在 border-radius 屬性中只指定一個(gè)值,那么將生成 4 個(gè) 圓角。
但是,如果你要在四個(gè)角上一一指定,可以使用以下規(guī)則:
四個(gè)值: 第一個(gè)值為左上角,第二個(gè)值為右上角,第三個(gè)值為右下角,第四個(gè)值為左下角。
三個(gè)值: 第一個(gè)值為左上角, 第二個(gè)值為右上角和左下角,第三個(gè)值為右下角
兩個(gè)值: 第一個(gè)值為左上角與右下角,第二個(gè)值為右上角與左下角
一個(gè)值: 四個(gè)圓角值相同
還有一種寫(xiě)法:border-radius:10px 10px 10px 10px/20px 20px 20px 20px;
這是一種更細(xì)分的寫(xiě)法,
其中/前面的是x軸方向的圓角/后面的是y軸方向的圓角,兩個(gè)設(shè)置一樣的話就相當(dāng)于設(shè)置一個(gè)
例如:border-radius:10px 10px 10px 10px/10px 10px 10px 10px;相當(dāng)于border-radius:10px/10px;相當(dāng)于border-radius:10px;
box-shadow支持多重陰影寫(xiě)法如下:
box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px,inset rgba(0,0,0,.5) 0 -5px 20px, rgba(0,0,0,.5) 0 -5px 10px ,rgba(255,255,255,.5) 0 5px 10px;