CSS3的新特性是什么

本篇內容主要講解“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的新特性是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！