語法：background-clip:border-box|padding-box|content-box;
border-box 預設值，背景在border以及border以內的區域可見
padding-box 背景在padding區域和content區域可見
content-box 背景只在content區域可見
注：background-clip就是用來設定背景在哪個區域可見
語法：background-origin:padding-box|border-box|content-box;
padding-box 預設值，背景原點從padding區域開始
border-box 背景原點從border區域開始
content-box 背景原點從content區域開始
注：background-origin主要用來設定背景圖的定位區域
注：我們經常將背景切割和背景原點結合使用
eg: background-clip:content-box;
background-origin:content-box;
背景在content區域可見，背景原點從content區域開始
語法：background-size:數值|百分比|cover|contain;
1.數值
以數值的方式來設定背景圖的寬度和高度，第乙個值代表寬度，第二個值代表高度，當省略第二個值時，預設為auto,等比例縮放
eg1: background-size:400px 150px; (有可能會發生變形,不會超出容器)
eg2: background-size:400px; (不會發生變形，有可能超出容器)
2.百分比
以容器寬高的百分比來設定背景圖的大小
eg1: background-size:100% 100%; (背景圖不會超出容器，但是有可能會發生變形)
eg2: background-size:100%; (背景圖有可能超出容器，但是不會發生變形)
3.cover
將背景圖擴充套件至足夠大，以使背景圖完全覆蓋背景區域，背景圖有可能超出容器，不會發生變形
4.contain
把影象擴充套件至最大尺寸，以使寬度和高度完全適應內容區域。背景影象始終被包含在容器內,不會發生變形
語法：background:hsla(h,s,l,a);
h 色調，取值範圍0~360
s 飽和度，取值範圍0%~100%
l 明度，取值範圍0%~100%
a 透明度，取值範圍0~1
語法：background:url(1.jpg) no-repeat left top,
1.線性漸變
語法：background:linear-gradient(方向,顏色值 漸變位置,顏色值 漸變位置);
eg: background:linear-gradient(to right,red 0%,blue 20%,green 30%);
注：重複的線性漸變，寫法如下：
background:repeating-linear-gradient(red 0%,blue 10%,green 20%);
注：設定重複的線性漸變時，一定要指定漸變位置
2.徑向漸變
語法：background:-webkit-radial-gradient(中心點位置,形狀 漸變半徑長度,顏色值 漸變位置,顏色值 漸變位置);
eg: background:-webkit-radial-gradient(left top,circle closest-corner,red 0%,green 20%);
注：a) circle 預設漸變形狀為橢圓，設定為circle時為圓形
b) closest-corner 漸變半徑為圓心到離圓心最近的角
closest-side ----------------------------邊
farthest-corner -------------------------遠的角
farthest-side -------------------------遠的邊
注：重複的徑向漸變，寫法如下：
background:-webkit-repeating-radial-gradient(red 0%,green 10%,yellow 15%);
擴充套件一、蒙版
擴充套件二、背景在文字區域可見
語法：-webkit-background-clip:text;
注：設定為text時，字型顏色必須設定為透明
1.邊框路徑
2.影象邊框裁剪位置
語法：border-image-slice:數值;
注：預設情況下，中間部分不顯示，新增fill即可顯示
eg: border-image-slice:27 fill; (設定數值專指畫素)
3.影象邊框平鋪屬性
語法：border-image-repeat:stretch|repeat|round;
stretch 預設值，拉伸
repeat 平鋪，會出現不完整的影象
round 鋪滿，不會出現不完整的影象
eg: border-image-repeat:round stretch;
水平方向鋪滿，垂直方向拉伸
css3 背景漸變
在沒有了解css也可以做背景漸變以前，我都是通過ps一張背景漸變的來應用到自己所做的網頁中。然而，在前不久我了解到css3也可以做背景漸變後，想要做背景漸變的效果就很容易了許多，下面是一些css3做背景漸變的方法。一.線性漸變 自上而下的線性漸變 div 從左往右的線性漸變 div 第乙個引數是漸變...
css3 顏色 背景 漸變
漸變放在 css裡的語句 一定要按這個順序排，才不會出錯。否則 有的瀏覽器會不正常，今天本來調好了，發現ie9不行，搞了半天不行，崩潰了 最後準備還是使用背景算了 最後一次 測試，終於搞定 background moz linear gradient top,fefefe,d3ecff moz火狐 ...
css3實現背景漸變
一 線性漸變 詳細 在css3中，可以使用 linear gradient實現背景線性漸變。linear gradient to left right top bottom 在ff瀏覽器時需要將樣式 書寫成 moz linear gradient chrome瀏覽器時需要寫成 webkit line...