CSS3新增部分常用屬性總結

2021-10-18 12:38:46 字數 2035 閱讀 4008

1.border-color:為邊框設定顏色

相關屬性:border-top-color, border-right-color, border-bottom-color , border-left-color

2.border-image:邊框

border-image :< image > [ < number > | < percentage >] [ < border-width > ] [ stretch | repeat | round ]

相關屬性:border-image:border-top-image , border-right-image , border-bottom-image , border-left-image

border-corner-image:border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image

[ stretch | repeat | round ]:

拉伸 | 重複 | 平鋪 (其中stretch是預設值。)

div

3.border-adius:圓角邊框

border-radius : none | < length> [ / < length> ]?

相關屬性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

div

4.box-shadow:陰影效果

box-shadow:< length> < length> < length> || < color>

陰影水平偏移值(可取正負值);陰影垂直偏移值(可取正負值);陰影模糊值;陰影顏色

div

1.background-origin:指定背景從**開始顯示

background-origin : border | padding | content

border:

從border區域開始顯示背景。

padding:

從padding區域開始顯示背景。

content:

從content區域開始顯示背景。

div

3.background-clip:背景剪裁

border-box:

從border區域向外裁剪背景。

padding-box:

從padding區域向外裁剪背景。

content-box:

從content區域向外裁剪背景。

no-clip:

從border區域向外裁剪背景。

div

1.text-shadow:文字陰影

h1

2.word-wrap:自動換行

word-wrap : normal | break-word

normal:

控制連續文字換行。

break-word:

內容將在邊界內換行。如果需要,詞內換行(word-break)也會發生。

3.text-overflow:

text-overflow : clip | ellipsis

clip:

不顯示省略標記(…),而是簡單的裁切。

ellipsis:

當物件內文字溢位時顯示省略標記(…)

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...

css3 新增屬性

background origin 背景影象顯示的原點。background clip 規定背景的繪製區域。padding box 從padding區域 含padding 開始顯示背景影象。border box 從border區域 含border 開始顯示背景影象。content box 從cont...

Css3新增屬性

1.新增邊框屬性 box shadow 實現邊框陰影 屬性值有 模糊度 x軸偏移y軸偏移 color 陰影顏色 border radius 實現圓角邊框 屬性值越大角度越大 border image 實現邊框 border image source slice width outset repeat...