【CSS3】什麼是CSS3 及常用操作說明 --更新中

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);

效果:
在這裏插入圖片描述

<更新中……>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章