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.偽類選擇器（常用的簡單歸納下）

:nth-child(n) p:nth-child(2)  選擇屬於其父元素的第二個子元素的每個 <p> 元素。    適用於給父類名使用

:nth-last-child(n)  p:nth-last-child(2) 同上，從最後一個子元素開始計數。  

:nth-of-type(n) p:nth-of-type(2)  選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。 

:nth-last-of-type(n)  p:nth-last-of-type(2) 同上，但是從最後一個子元素開始計數。  

p:nth-of-type(2){ background:#ff0000; }

<div>

    <h1>這是標題</h1>    

    **<p>第一個段落。</p>**    p:nth-child(3)

    <p>第二個段落。</p>

    <p>第三個段落。</p>

</div>

3.顏色

RGBA、HSLA模式

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

background-color: hsla(182, 44%, 76%, .5);  

background-color: rgba(166, 218, 220, .5);

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

x-shadow 必需。陰影水平偏移量，可正可負，正值表示陰影在右邊，負值表示陰影在左邊。
y-shadow 必需。陰影垂直偏移量，可正可負，正值表示陰影在上邊，負值表示陰影在下邊。
distance 可選。陰影模糊距離。只能為正值，值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊。
size 可選。陰影擴充套件半徑。可正可負，正值表示整個陰影都延展擴大，負值表示縮小。
color
可選。陰影的顏色。
inset
可選。將外部陰影 (outset) 改為內部陰影。

box-reflect

向框新增一個或多個倒影。

（1）direction：定義倒影的方向，取值包括：

• above：倒影在物件的上邊。
• below：倒影在物件的下邊。
• left：倒影在物件的左邊。
• right：倒影在物件的右邊。
  （2）offset：定義倒影與物件之間的間隔，可正可負，預設為0。取值包括：
• 長度值
• 百分比（根據物件的尺寸進行確定）
  （3）mask-box-image：定義遮罩影像，該影像將覆蓋投影區域，預設為無遮罩。
• <url>：使用絕對或相對地址指定遮罩影像。
• <linear-gradient>：使用線性漸變建立遮罩影像。
• <radial-gradient>：使用徑向(放射性)漸變建立遮罩影像。
• <repeating-linear-gradient>：使用重複的線性漸變建立背遮罩像。
• <repeating-radial-gradient>：使用重複的徑向(放射性)漸變建立遮罩影像。

5.CSS3盒模型

• content-box： 內容+padding+邊框
• padding-box： 內容+padding
• border-box： 內容

6.word-break

• normal 使用瀏覽器預設的換行規則。
• break-all 允許在單詞內換行。
• keep-all 只能在半形空格或連字元處換行。

image.png

7.text-overflow

image.png

• clip 修剪文字。
• ellipsis 顯示省略符號來代表被修剪的文字。
• string 使用給定的字串來代表被修剪的文字。

text-overflow:ellipsis；

white-space:nowrap

overflow:hidden；