web前端入門(mén)到實(shí)戰(zhàn)：CSS3邊框與圓角

1. CSS3 圓角

• border-radius 屬性

一個(gè)最多可指定四個(gè)border -*- radius屬性的復(fù)合屬性，這個(gè)屬性允許你為元素添加圓角邊框！
語(yǔ)法：border-radius: 1-4 length|% / 1-4 length|%;
兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera

• 多值

四個(gè)值：左上，右上，右下，左下
三個(gè)值：左上，右上和左下，右下
兩個(gè)值：左上和右下，右上和左下
一個(gè)值：四個(gè)圓角值相同

• 擴(kuò)展屬性

border-top-left-radius：定義了左上角的弧度
border-top-right-radius：定義了右上角的弧度
border-bottom-right-radius：定義了右下角的弧度
border-bottom-left-radius：定義了左下角的弧度

2. CSS3 盒陰影

• box-shadow 屬性

設(shè)置一個(gè)或多個(gè)下拉陰影的框
語(yǔ)法：box-shadow: h-shadow v-shadow blur spread color inset;
(blur是模糊值，spread是擴(kuò)展值，inset可轉(zhuǎn)為內(nèi)陰影）
兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera

3. CSS3 邊界圖片

• border-image 屬性

構(gòu)建可擴(kuò)展按鈕
語(yǔ)法：border-image: source slice width outset repeat;
兼容性：IE不兼容、FireFox、Chrome、Safari6+、Opera不兼容

• 擴(kuò)展屬性

border-image-source：指定要使用的圖像，而不是由border-style屬性設(shè)置的邊框樣式
語(yǔ)法：border-image-source: none|image;

border-image -slice：指定圖像的邊界向內(nèi)偏移
語(yǔ)法：border-image-slice: number|%|fill;

border-image -width：指定圖像邊界的寬度
語(yǔ)法：border-image-width: number|%|auto;

border-image-outset：指定在邊框外部繪制 border-image-area 的量
語(yǔ)法：border-image-outset: length|number;

border-image-repeat：圖像邊界是否應(yīng)重復(fù)（repeated）、拉伸（stretched）或鋪滿（rounded）
語(yǔ)法：border-image-repeat: stretch|repeat|round|initial|inherit;