1顶霞、background-clip
定義: background-clip 屬性規(guī)定背景的繪制區(qū)域局雄。
語法:background-clip: border-box|padding-box|content-box;
參數(shù):border-box? 背景被裁剪到邊框盒司草。
padding-box? 背景被裁剪到內(nèi)邊距框
content-box? 背景被裁剪到內(nèi)容框
2、background-origin
定義: background-origin 屬性規(guī)定 background-position 屬性相對于什么位置來定位键思。
語法: background-origin: padding-box|border-box|content-box;
參數(shù): border-box? ? ? 背景圖像相對于邊框盒來定位
padding-box? ? 背景圖像相對于內(nèi)邊距框來定位谦屑。
content-box? ? 背景圖像相對于內(nèi)容框來定位
3、 background-size
定義:規(guī)定背景圖像的尺寸
語法:background-size: length|percentage|cover|contain;
參數(shù): length? 設置背景圖像的高度和寬度涛漂。第一個值設置寬度赏表,第二個值設置高度。如果只設置一個值 匈仗,則第二個值會被設置為 "auto"瓢剿。
percentage? 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度悠轩,第二個值設置高度间狂。如果只設置一個值,則第二個值會被設置為 "auto"火架。
cover? 把背景圖像擴展至足夠大鉴象,以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中何鸡。
contain? 把圖像圖像擴展至最大尺寸纺弊,以使其寬度和高度完全適應內(nèi)容區(qū)域
4、background-break
定義: 指定內(nèi)聯(lián)元素的背景圖像進行平鋪時的循環(huán)方式
語法:background-break: continuous |bounding-box|each-box;
參數(shù): continuous 背景圖像相對于內(nèi)邊距框來定位音比。
bounding-box? ? ? 背景圖像相對于邊框盒來定位
each-box? ? ? ? ? 背景圖像相對于內(nèi)容框來定位
5俭尖、在一個元素中顯示多個背景圖像
概述:css3中規(guī)定了一個元素可以顯示多個背景圖像氢惋,這就是一個新的規(guī)定洞翩。
div{
background:url("flower-red.png"),
url("flower-green.png"),
url("sky.png");
background-repeat:no-repeat, repeat-x, no-repeat;
background-position:3% 98%,85%,center,center,top;
width:300px;
padding:90px 0px;
}
6、圓角和邊框border-radius
定義:屬性是一個簡寫屬性焰望,用于設置四個 border-*-radius屬性
語法: border-radius: px|% px|%;
7骚亿、使用圖像邊框border-image
定義:border-image 屬性是一個簡寫屬性,用于設置以下屬性
border-image-source? ? ? 用在邊框的圖片的路徑熊赖。
border-image-slice? ? ? ? 圖片邊框向內(nèi)偏移
border-image-width? ? ? ? 圖片邊框的寬度来屠。
border-image-outset? ? ? 邊框圖像區(qū)域超出邊框的量。
border-image-repeat? ? ? 圖像邊框是否應平鋪(repeated)震鹉、鋪滿
(rounded)或拉伸(stretched)俱笛。