CSS3邊框與圓角

2021-09-25 13:01:38 字數 871 閱讀 3196

border-radius屬性

box-shadow屬性

屬性值描述h-shadow

設定陰影在水平方向上的偏移量

v-shadow

設定陰影在豎直方向上的偏移量

blur

設定由陰影的邊框往陰影內部x長度進行漸變,x為blur的值

spread

設定原本的陰影圖案往上下左右四個方向分別擴充套件x長度,x為spread的值

color

設定陰影的背景顏色

inset

值為inset,設定內陰影,將從盒子的上邊和左邊向內分別移動一定的距離來形成盒子的陰影,原本盒子設定顯示顏色的面積會變小,但是實際面積不變。

border-image屬性

可分開寫成5個單獨的屬性:

屬性屬性值

描述border-image-source

none或者image

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

border-image-slice

number、%、fill

指定影象邊界向內偏移

border-image-width

number、%、auto

指定影象邊界的寬度

border-image-outset

length、number

指定將邊框影象向邊框外部擴充套件一定的量

border-image-repeat

stretch、repeat、round、initial、inherit

指定影象邊界是否應重複(repeat)、拉伸(stretch)、鋪滿(round)

CSS3邊框與圓角

乙個最多可指定四個border radius屬性的復合屬性,這個屬性允許你為元素新增圓角邊框!語法 border radius 1 4 length 1 4 length 相容性 ie9 firefox4 chrome safari5 opera 四個值 左上,右上,右下,左下 三個值 左上,右上和...

CSS3圓角邊框

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

css3 邊框圓角陰影漸變

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