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