背景新增屬性和css漸變及倒影

背景新增屬性和css漸變及倒影

1、background新增屬性

　　background-size：指定對象的背景圖像的尺寸大小。

　　background:url() 0 0,url() 0 100%;多背景

　　background-origin：指定對象的背景圖像定位的原點。

　　 background-clip：指定對象的背景圖像向外裁剪的區域。

　　background-image：linear-gradient()線性漸變

　　background-image：repeating-linear-gradient()重複的線性漸變

　　background-image：radial-gradient()徑向漸變

　　background-image：repeating-radial-gradient()重複的徑向漸變

　　background-origin 設置背景定位的原點

　　border-box： 從border區域開始繪製背景。

　　padding-box： 從padding區域開始繪製背景。

　　content-box： 從content內容區域開始繪製顯示背

　　background-clip 背景裁剪區域

　　border-box： 從border區域向外裁剪背景。

　　padding-box： 從padding區域向外裁剪背景。

　　content-box： 從content區域向外裁剪背景。

　　text：前景內容的形狀（好比文字）做爲裁剪區域向外裁剪 （需加前綴）

2、gradient漸變

　　gradient能夠應用在全部接受背景圖像的屬性上

　　　　linear-gradient： (線性漸變） 建立遮罩圖像。

　　　　radial-gradient： (徑向漸變) 建立遮罩圖像。

　　　　repeating-linear-gradient： 重複的(線性漸變) 建立遮罩圖像。

　　　　repeating-radial-gradient： 重複的(徑向漸變) 建立遮罩圖像。

3、線性漸變

　　linear-gradient(角度，點，點，...)

　　　　角度的方位值：從什麼方向開始漸變

　　　　to left： 設置漸變爲從右到左。 至關於: 270deg

　　　　to right： 設置漸變從左到右。 至關於: 90deg

　　　　to top： 設置漸變從下到上。 至關於: 0deg

　　　　to bottom（默認）：設置漸變從上到下。至關於: 180deg。這是默認值，等同於留空不寫。

　　對角漸變：to top left | to top right | to bottom right | to bottom left

　　角度數值：從什麼角度開始漸變，單位（deg）

　　點：漸變點的顏色和位置

　　顏色 ： 位置：%|px

　　　　如：red 50%, blue 100%(紅色從50%漸變到100%爲藍色)

　　linear-gradient（30deg, red 10%, green 10%）

　　線性漸變重複平鋪：repeating-linear-gradient：

 

4、徑向漸變

　　radial-gradient( shape [ size ] at [ position ],color 位置,color 位置，+)

　　shape： circle（圓） | ellipse （橢圓 默認）

　　 size: 半徑

　　　　圓形的半徑圓只有一個值，橢圓有兩個值，px | 關鍵詞

　　關鍵詞：

　　　　closest-side： 圓心到最近的邊

　　　　closest-corner： 圓心到最近的角

　　　　farthest-side： 圓心到離圓心最遠的邊

　　　　farthest-corner(默認)： 圓心到離圓心最遠的角

　　radial-gradient( shape [ size ] at [ position ],color 位置,color 位置，+)

　　position 肯定圓心的位置，X座標，Y縱座標；若是隻提供一個，第二值默認爲50%，即center

　　　　值： 關鍵詞 px % 　　

　　　　　　X關鍵詞 ：left：左 center：中 right：右

　　　　　　Y關鍵詞 ：top：上 center：中 bottom：下

　　　　　　例：radial-gradient(ellipse 100% 100% at 300px 300px, #f00 10%, #ff0 20%, #080 100%)

　　repeating-radial-gradient () 線性漸變重複平鋪

5、盒子陰影

　　box-shadow 屬性向框添加一個或多個陰影

　　　　box-shadow：h-shadow v-shadow blur spread color inset ;

　　　　　　h-shadow 水平陰影的位置。容許負值

　　　　　　v-shadow 垂直陰影的位置。容許負值

　　　　　　blur 模糊距離

　　　　　　spread 陰影的尺寸

　　　　　　color 陰影的顏色

　　　　　　inset 將外部陰影 (outset) 改成內部陰影

6、盒子倒影

　　　box-reflect：none | direction offset

　　　mask-box-image

　　　　direction: 倒影在對象的位置

　　　　　　above 上

　　　　　　below 下

　　　　　　left 左

　　　　　　right 右

　　　　offset：用長度值來定義倒影與對象之間的間隔,能夠爲負值 length | percentage

　　　　mask-box-image: 遮罩圖像

　　　　　　<url>： 使用絕對或相對地址指定遮罩圖像。

　　　　　　linear-gradient： 使用線性漸變建立遮罩圖像。

　　　　　　radial-gradient： 使用徑向(放射性)漸變建立遮罩圖像。

　　　　　　repeating-linear-gradient： 使用重複的線性漸變建立背遮罩像。

　　　　　　repeating-radial-gradient： 使用重複的徑向(放射性)漸變建立遮罩圖像。

　　　　　　none：無遮罩圖像

 

7、 MASKS遮罩/蒙版

　　-webkit-mask-image 遮罩圖片

　　　　：url('');

　　　　linear-gradient

　　　　radial-gradient

　　 -webkit-mask-repeat 遮罩平鋪

　　　　repeat

　　　　no-repeat

　　　　repeat-x

　　　　repeat-y

　　-webkit-mask-position 遮罩位置

　　　　關鍵詞 | % | length

　　-webkit-mask-size 遮罩尺寸

　　　　 % | length

　　參考網址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask#瀏覽器兼容性