CSS3新特性

小那發表於2024-08-06
CSSS3

目錄：

一、選擇器的擴充套件

1. 屬性選擇器

2. 偽類選擇器

3. 偽元素選擇器

二、盒子模型的增強

1. box-sizing屬性

2. 邊框圓角（border-radius）

3. 盒陰影（box-shadow）

三、過渡和動畫效果

1. 過渡效果

2. 動畫效果

四、響應式佈局

1. 媒體查詢（media query）

2. 彈性佈局（Flexbox）

一、選擇器的擴充套件

1. 屬性選擇器　　

屬性選擇器允許按照元素的某個屬性來選擇元素。例如，可以根據元素的屬性值選擇特定的元素。

/* 選擇所有帶有 target 屬性的連結 */
a[target] {
color: blue;
}

2. 偽類選擇器　

　CSS3 引入了更多的偽類選擇器，可以選擇元素的特殊狀態或位置。例如，可以選擇第一個子元素、滑鼠懸停的元素等。

/* 選擇第一個段落元素 */
p:first-child {
font-weight: bold;
}

/* 當滑鼠懸停在連結上時改變樣式 */
a:hover {
color: red;
}

3. 偽元素選擇器　　

可以用於選擇元素的特定部分，例如元素的第一個字、第一個字母、之前的空白等。

p::first-letter {
/* 第一個字母的樣式規則 */
}

二、盒子模型的增強　　

CSS3對盒子模型進行了一些改進，使得我們能夠更加靈活地控制元素的佈局和尺寸。

1. box-sizing屬性

可以用於更改元素的盒子模型演算法，使得元素的寬度和高度包括邊框和內邊距。

預設值是content-box，這意味著元素的寬度和高度只包括內容的寬度和高度，而不包括邊框（border）、內邊距（padding）和外邊距（margin）。

如果將box-sizing屬性的值設定為border-box，則元素的寬度和高度將包括內容的寬度和高度、邊框和內邊距，但不包括外邊距。

div {
box-sizing: border-box;
}

2. 邊框圓角（border-radius）

透過設定邊框圓角屬性，可以使元素的邊框呈現圓角效果。

/* 給一個 div 元素設定圓角邊框 */
div {
border-radius: 10px;
}

3. 盒陰影（box-shadow）

用於給元素新增陰影效果。陰影可以設定水平和垂直偏移量、陰影的模糊程度、陰影的顏色等。

/* 語法 */
box-shadow: h-offset v-offset blur spread color;

/* 給一個標題新增盒陰影 */
h1 {
box-shadow: 5px 5px 5px #888888;
}

h-offset：水平偏移量，陰影在水平方向上偏移的距離。如果是負值，陰影將在元素左邊。
v-offset：垂直偏移量，陰影在垂直方向上偏移的距離。如果是負值，陰影將在元素的上方。
blur：陰影的模糊程度。值越大，陰影邊緣越模糊，但也越向外擴散。
spread：陰影的大小。正值會擴大陰影，負值會縮小陰影。
color：陰影的顏色。

三、過渡和動畫效果　　

CSS3 引入了過渡（transition）和動畫（animation）功能，使得元素的狀態改變更加平滑和生動。

1. 過渡效果

透過設定過渡屬性，可以在元素狀態改變時實現平滑的過渡效果。

/* 當滑鼠懸停在連結上時，改變顏色過渡效果 */
div {
transition: background-color 0.5s ease;
}
div:hover {
background-color: #f00;
}

2. 動畫效果

透過使用關鍵幀動畫（@keyframes），可以建立自定義的動畫效果。

/* 建立一個旋轉動畫效果 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* 應用旋轉動畫到一個影像 */
img {
animation: spin 2s linear infinite;
}

四、響應式佈局　　

CSS3 引入了響應式佈局的功能，使得網頁能夠根據不同裝置的螢幕大小和解析度進行自適應佈局。

1. 媒體查詢（media query）　　

用於針對不同的媒體型別定義不同的樣式。媒體查詢可以針對不同的螢幕尺寸、裝置型別、解析度等條件來應用不同的樣式規則。

/* 當瀏覽器寬度小於 600px 時，改變背景顏色 */
@media (max-width: 600px) {
　　body {
　　　　background-color: lightblue;
　　}
}

2. 彈性佈局（Flexbox）　　

它是一種用於在頁面上佈置元素的佈局模式，使得當頁面佈局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可預測地執行。

　　Flexbox模型中的元素可以是行或者列，並且可以靈活地改變大小和形狀。使用Flexbox佈局，可以輕鬆地實現元素的水平和垂直居中、元素的重新排序、元素的擴充套件等操作。

/* 建立一個使用 Flexbox 的水平佈局 */
.container {
display: flex;
justify-content: space-between;
}

相關文章