CSS3邊框與圓角

2022-09-14 06:12:11 字數 1489 閱讀 9194

乙個最多可指定四個border -*- radius屬性的復合屬性,這個屬性允許你為元素新增圓角邊框!

語法:border-radius: 1-4 length|% / 1-4 length|%;

相容性:ie9+、firefox4+、chrome、safari5+、opera

四個值:左上,右上,右下,左下

三個值:左上,右上和左下,右下

兩個值:左上和右下,右上和左下

乙個值:四個圓角值相同

border-top-left-radius:定義了左上角的弧度

border-top-right-radius:定義了右上角的弧度

border-bottom-right-radius:定義了右下角的弧度

border-bottom-left-radius:定義了左下角的弧度

設定乙個或多個下拉陰影的框

語法:box-shadow: h-shadow v-shadow blur spread color inset;

(blur是模糊值,spread是擴充套件值,inset可轉為內陰影)

相容性:ie9+、firefox4+、chrome、safari5+、opera

構建可擴充套件按鈕

語法:border-image: source slice width outset repeat;

相容性:ie不相容、firefox、chrome、safari6+、opera不相容

border-image-source:指定要使用的影象,而不是由border-style屬性設定的邊框樣式

語法:border-image-source: none|image;

border-image -slice:指定影象的邊界向內偏移

語法:border-image-slice: number|%|fill;

border-image -width:指定影象邊界的寬度

語法:border-image-width: number|%|auto;

border-image-outset:指定在邊框外部繪製 border-image-area 的量

語法:border-image-outset: length|number;

border-image-repeat:影象邊界是否應重複(repeated)、拉伸(stretched)或鋪滿(rounded)

語法:border-image-repeat: stretch|repeat|round|initial|inherit;

CSS3邊框與圓角

border radius屬性 box shadow屬性 屬性值描述h shadow 設定陰影在水平方向上的偏移量 v shadow 設定陰影在豎直方向上的偏移量 blur 設定由陰影的邊框往陰影內部x長度進行漸變,x為blur的值 spread 設定原本的陰影圖案往上下左右四個方向分別擴充套件x長...

CSS3圓角邊框

本文介紹border radius的使用 應用 特殊圓形的製作等!1.水平和垂直半徑一樣 border radius只設定乙個值 四個圓角相同 border radius設定兩個值 斜對角相同 border radius設定三個值 top right和bottom left相同 border rad...

css3 邊框圓角陰影漸變

css3堅持漸進增強 從被所有瀏覽器支援的基本功能開始,逐步地新增那些只有新式瀏覽器才支援的功能,向頁面新增無害於基礎瀏覽器的額外樣式和功能。當瀏覽器支援時,它們會自動地呈現出來並發揮作用。原則。相對的是優雅降級原則,即是一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。css3中新增特性包括...