CSS3學習，常用常記（邊框，圓角，背景）

2021-09-13 12:43:17 字數 972 閱讀 4522

用 css3，你可以建立圓角邊框，新增陰影框，並作為邊界的形象而不使用設計程式，如 photoshop。

div
css3 中的 box-shadow 屬性被用來新增陰影；

div
div


#round


#stretch
css圓角製作器；

使用 css3 border-radius 屬性，你可以給任何元素製作 "圓角"。

#rcorners1 


#rcorners2 


#rcorners3
如果你在 border-radius 屬性中只指定乙個值，那麼將生成 4 個 圓角。

您還可以建立橢圓邊角；

#rcorners7 


#rcorners8 


#rcorners9 


#example1 


#example1 


body


div
background-origin屬性指定了背景影象的位置區域。

content-box, padding-box,和 border-box區域內可以放置背景影象。

css3中background-clip背景剪裁屬性是從指定位置開始繪製。

#example1 


#example2 


#example3

CSS3邊框與圓角

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

CSS3邊框與圓角

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

css3基礎 選擇器 邊框與圓角 背景與漸變

css3選擇器相關 section div直接子元素選擇器 div article相鄰兄弟選擇器 在元素之後出現 div article通用兄弟選擇器 在元素之後出現 屬性選擇器 a href a href 包含two且屬性值用空格分隔 a class two 屬性的第乙個值以 開頭 a href ...