CSS3中引入了许多令人兴奋的新特性，这些特性使得开发者能够创建更丰富、更动态和更响应式的网页。

选择器

属性选择器：允许你根据元素的属性值来选择元素，例如 [attribute]、[attribute=value]、[attribute~=value]、[attribute|=value] 等。

css">/* 选择所有带有 title 属性的元素 */
[title] {color: blue;
}/* 选择 title 属性值为 "example" 的元素 */
[title="example"] {font-weight: bold;
}

伪类选择器：允许你根据元素的状态或位置来选择元素，例如 :hover、:focus、:nth-child()、:not() 等

css">/* 鼠标悬停时改变元素的背景颜色 */
button:hover {background-color: lightgray;
}/* 选择第一个段落元素 */
p:first-child {font-weight: bold;
}

---

圆角效果 - border-radius

border-radius：为元素的边框创建圆角效果，从而替代了以往需要多个图片拼接实现的方式。

css">#example1 {border: 2px solid red;border-radius: 25px;
}#example2 {border: 2px solid red;border-radius: 50px 20px;
}

---

阴影效果 - box-shadow

box-shadow、text-shadow：为元素的背景和文本添加阴影效果。

css">button {  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */  
}

---

渐变效果 - linear-gradient()

linear-gradient()：线性渐变和径向渐变，可以在元素的背景中创建平滑的颜色过渡效果。

css">#grad {background-image: linear-gradient(red, yellow, blue);
}

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

css">/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

---

形变效果 - transform

transform：应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，倾斜，偏移等。

css">div
{transform: rotate(45deg); // 旋转45°transform: scale(2, 0.5); // X轴缩放2 Y轴缩放0.5transform: skew(30deg, 45deg); // X轴倾斜30  Y轴倾斜45transform: translate(45px, 50%); // X轴偏移45px Y轴偏移50%
}

---

过渡效果 - transition

transition：元素在状态改变时（如hover时颜色改变）能够平滑地过渡属性值。

css">div {  background-color: red;  transition: background-color 0.5s ease; /* 0.5秒内平滑过渡 */  
}  
div:hover {  background-color: blue;  
}

---

动画效果 - animation

@keyframes：可以创建动画，通过逐步改变从一个CSS样式设定到另一个。
animation：应用动画

在动画过程中，可以更改CSS样式的设定多次。

指定的变化时发生时使用％，0％是开头动画，100％是当动画完成，或关键字"from"和"to"

css">@keyframes moveRight {  0% { left: 0; }  100% { left: 200px; }  
}  div {  position: relative;  animation: moveRight 2s; /* 应用动画  2秒内从左边移动到右边 */  
}

---

媒体查询 - @media

@media：根据设备的特性（如屏幕宽度）来应用不同的样式规则，是实现响应式设计。

可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

css">.example {padding: 20px;color: white;
}
/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {.example {background: red;}
}/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {.example {background: green;}
}/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {.example {background: blue;}
} /* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) {.example {background: orange;}
} /* 超大型设备（大型笔记本电脑和台式机，1200 像素及以上） */
@media only screen and (min-width: 1200px) {.example {background: pink;}
}

也可以针对不同的媒体使用不同样式文件 :

<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"><!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

---

弹性盒子布局 - flex

flex布局

---

网格布局 - grid

grid布局

---

背景效果

1. 多背景图

一个元素可以同时设置多个背景图像

css">div {  background-image: url('image1.jpg'), url('image2.png'); /* 设置两个背景图像 */  
}

2. 背景裁剪

background-clip：它决定了背景图像或颜色应该被裁剪到哪个区域

• border-box：背景被裁剪到边框盒，即边框以内的区域。
• padding-box：背景被裁剪到内边距框，即padding以内的区域。
• content-box：背景被裁剪到内容框，即内容以内的区域。

css">/* 假设我们有一个类名为 .box 的元素 */  
.box {  width: 200px;  height: 200px;  padding: 20px;  border: 10px solid black;  /* 设置背景图像 */  background-image: url('path/to/your/image.jpg');  /* 设置背景裁剪区域为内容框 */  background-clip: content-box;  
}

3. 透明效果

rgba颜色模式：分为两部分，rgb为颜色值，a为透明度

css">div {  background-color: rgba(255, 0, 0, 0.5); /* 半透明的红色 */  
}

hsla：分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

设置一个背景颜色为绿色（色相120度），50%的饱和度，75%的亮度，并且半透明（透明度0.5）的元素：

css">.element {  background: hsla(120, 50%, 75%, 0.5);  
}

opacity：指定不透明度。从0.0（完全透明）到1.0（完全不透明）

css">div2{opacity:0.5
}