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;
相關文章
- css3 新特性CSSS3
- CSS3新特性CSSS3
- html5新特性總結HTML
- ES6新特性總結
- React 16 新特性使用總結React
- JDK1.8新特性總結JDK
- PHP 各個版本新特性總結PHP
- iOS 12正式版新特性總結iOS
- Java 新特性總結——簡單實用Java
- Java8常用的新特性總結Java
- JDK8新特性學習總結JDK
- 前端技術面——(CSS3新特性)前端CSSS3
- H5-30 CSS3 新特性H5CSSS3
- 【Java】jdk1.8新特性及用法總結JavaJDK
- JDK 1.5 - 1.8 各版本的新特性總結JDK
- react-router v6新特性總結React
- Oracle特性總結Oracle
- 總結:JDK1.5-JDK1.8各個新特性JDK
- CSS3 和 HTML5 新特性一覽CSSS3HTML
- 2024-05-10 ES6新特性小總結
- es6、7、8、9新語法新特性-總結
- CSS3一些總結CSSS3
- ES6、7、8常用新特性總結(超實用)
- 12C新特性___In-Memory列式儲存的總結
- MySQL8.0-新特性彙總MySql
- MySQL 8.0 新特性梳理彙總MySql
- 蘋果WWDC18最全總結 四大系統新特性彙總蘋果
- const特性總結(不斷更新)
- ES6新特性總結之解構賦值和字串模板賦值字串
- Redis 7.0 新功能新特性總覽Redis
- ORACLE 12C 優化器的一些新特性總結(二)Oracle優化
- ORACLE 12C 優化器的一些新特性總結(一)Oracle優化
- ES6新特性總結之函式和擴充套件運算子...函式套件
- 總結PHP 7新增加的特性PHP
- HTTP/2 特性的簡單總結HTTP
- ES6新特性總結之let和const--史上最全最簡潔
- C#6,C#7,V#8,C#9 的新特性總結C#
- 帶你總結ES6的特性