CSS基础——CSS3新增样式

CSS3 在 CSS2.1 的基础上增加了许多新特性，包括了更加丰富的选择器、阴影、渐变、动画等功能。

1. 选择器

• 属性选择器：可以根据元素的属性来选择元素。

/* 选择所有 title 属性的元素 */
[title] { color: blue; }
 
/* 选择 title="test" 的元素 */
[title=test] { color: green; }
 
/* 选择 title 属性值开始为 test 的所有元素 */
[title^=test] { color: purple; }
 
/* 选择 title 属性值结束为 test 的所有元素 */
[title$=test] { color: orange; }
 
/* 选择 title 属性值包含 test 的所有元素 */
[title*=test] { color: red; }

• 结构性伪类选择器：根据元素在文档中的位置来选择元素。

/* 选择第一个 <p> 元素 */
p:first-child { color: yellow; }
 
/* 选择最后一个 <p> 元素 */
p:last-child { color: pink; }
 
/* 选择第 n 个子元素，n 从 1 开始 */
p:nth-child(2) { color: black; }
 
/* 选择所有 <p> 元素，这些 <p> 元素是其父级的第一个子元素 */
p:first-of-type { color: grey; }
 
/* 选择所有 <p> 元素，这些 <p> 元素是其父级的最后一个子元素 */
p:last-of-type { color: brown; }
 
/* 选择所有 <p> 元素，这些 <p> 元素是其父级的第 n 个子元素，n 从 1 开始 */
p:nth-of-type(3) { color: cyan; }

• 伪元素选择器：可以在元素的内容前后插入新内容。

/* 在每个 <p> 元素的内容前插入文本 "Start" */
p::before { content: 'Start '; }
 
/* 在每个 <p> 元素的内容后插入文本 "End" */
p::after { content: ' End'; }

2. 阴影和渐变

• 阴影：可以给元素添加阴影效果。

/* 给元素添加阴影 */
div {
  box-shadow: 10px 10px 5px grey;
}

• 线性渐变：可以设置元素的背景为线性渐变。

/* 设置元素背景为线性渐变 */
div {
  background: linear-gradient(to right, red, yellow);
}

3. 动画

• 使用 @keyframes 创建动画，然后通过 animation 属性应用到元素上。

/* 定义一个名为 move 的动画 */
@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
 
/* 应用动画到元素 */
div {
  animation: move 2s infinite alternate;
}

4. 圆角和边框图片

• 圆角：可以设置元素的角为圆角。

/* 设置元素角为圆角 */
div {
  border-radius: 20px;
}

• 边框图片：可以设置元素的边框为图片。

/* 设置元素边框为图片 */
div {
  border-image-source: url(border.png);
  border-