css3新特性(CSS3的新特性是什么)

1.屬性選擇器(常用的簡單歸納下)

[attribute=value] 用于選取帶有指定屬性和值的元素。

[title=W3School]{ border:5px solid blue; }

[attribute~=value] 包含指定詞匯的元素。后代選擇器

[title~=hello] { color:red; }

[attribute|=value] 用于選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。

[lang|=en] { color:red; }<p lang="en">Hello!</p><p lang="en-us">Hi!</p>

[attribute^=value] 匹配屬性值以指定值開頭的每個元素。

a[src^="https"]

[attribute$=value] 匹配屬性值以指定值結尾的每個元素。

a[src$=".pdf"]

[attribute*=value] 包含指定值的每個元素。

a[src*="abc"]

2.偽類選擇器(常用的簡單歸納下)

3.顏色

RGBA、HSLA模式

優點:相較opacity,不具有繼承性,即不會影響子元素的透明度

HSLA模式

H是色度,取值在0度~360度之間,0度是紅色,120度是綠色,240度是藍色。360度也是紅色。

S是飽和度,是色彩的純度,是一個百分比的值,取值在0%~100%,0%飽和度最低,100%飽和度最高

L是亮度,也是一個百分比值,取值在0%~100%,0%最暗,100%最亮。

A是不透明度,取值在0.0~1.0,0.0完全透明,1.0完全不透明。

image.png

4.文字陰影text-shadow、 圓角邊框border-radius、陰影box-shadow和倒影box-reflect

text-shadow

image.png

x-shadow 必需。 水平陰影的位置。允許負值。

y-shadow 必需。 垂直陰影的位置。允許負值。

distance 可選。 模糊的距離

color 可選。 陰影的顏色

box-shadow

CSS3新特性總結

x-shadow 必需。陰影水平偏移量,可正可負,正值表示陰影在右邊,負值表示陰影在左邊。

y-shadow 必需。陰影垂直偏移量,可正可負,正值表示陰影在上邊,負值表示陰影在下邊。

distance 可選。陰影模糊距離。只能為正值,值為0時,表示陰影不具有模糊效果,值越大陰影的邊緣就越模糊。

size 可選。陰影擴展半徑?？烧韶?正值表示整個陰影都延展擴大,負值表示縮小。

color

可選。陰影的顏色。

inset

可選。將外部陰影 (outset) 改為內部陰影。

box-reflect

向框添加一個或多個倒影。

(1)direction:定義倒影的方向,取值包括:

5.CSS3盒模型

6.word-break

image.png

7.text-overflow

image.png

到此,相信大家對“CSS3的新特性是什么”有了更深的了解,不妨來實際操作一番吧!這里是本站網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!