CSS3是CSS2的升級版本,3只是版本號,它在CSS2.1的基礎上增加了很多強大的新功能。
在使用過程中我們經常看到 一些加了短線的屬性,在編寫CSS3樣式時,不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規則尚未成爲W3C標準的一部分,是瀏覽器的私有屬性。
1.圓角效果border-redius
border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角,順時針 */
2.邊框陰影box-shadow
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
X軸偏移量 | 必須 水平陰影的位置 允許負值 |
---|---|
Y軸偏移量 | 必須 垂直陰影的位置 允許負值 |
陰影模糊半徑 | 可選 模糊距離 |
陰影擴展半徑 | 可選 陰影的尺寸 |
陰影顏色 | 可選 陰影的顏色 省略時默認黑色 |
投影方式 | 可選 設置 inset 時爲內部陰影方式 省略時爲外陰影方式 |
注:給一個class添加不同陰影時可用“,”隔開 box-shadow:4px 4px 6px #666,-4px -4px 6px red,0 0 16px 6px green inset;
各陰影屬性的區別
(1)陰影模糊半徑與陰影擴展半徑的區別
陰影模糊半徑:此參數可選,其值只能是爲正值,如果其值爲0時,表示陰影不具有模糊效果,其值越大陰影的邊緣就越模糊;
陰影擴展半徑:此參數可選,其值可以是正負值,如果值爲正,則整個陰影都延展擴大,反之值爲負值時,則縮小;
(2)X軸偏移量和Y軸偏移量值可以設置爲負數
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
X軸偏移量爲負數:
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:-4px 4px 6px #666;
}
Y軸偏移量爲負數:
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:4px -4px 6px #666;
}
效果圖:
3.爲邊框應用圖片 border-image
background:url(xx.jpg) 10px 20px no-repeat;
4.漸變色彩 linear-gradient(方向,顏色)
參數:
方向 | 作用 |
---|---|
0deg/to top | 從下向上 |
90deg/top right | 從左向右 |
180deg/to bottom | 從上向下 |
270deg/to left | 從右向左 |
/to top left | 右下角到左上角 |
/to top right | 左下角到右上角 |
注:
方向參數有兩種 角度或者英文表示 (角度/英文)
第一個參數省略時,默認爲“180deg”,等同於“to bottom”。第二個和第三個參數,表示顏色的起始點和結束點,可以有多個顏色值。
eg:
background-image:linear-gradient(to top left,red,yellow,blue);
效果:
<更新中……>