css3新特性有哪些（css3新增的属性用法介绍）

CSS3是CSS的第三个主要版本，它引入了许多新特性，并对旧特性进行了扩展和改进。CSS3除了延续了先前版本中的一些特性外，还支持许多新的功能，如动画、过渡、变形、渐变、阴影、文本效果等。本文将介绍CSS3的各种主要特性和用法。

1.选择器

选择器是CSS用于定位HTML元素并应用样式的语法。CSS3中新增了众多选择器，从而使得开发人员可以更加灵活地定位并处理HTML元素，常用的选择器括：

属性选择器：

属性选择器通过元素的属性来选择元素，例如：

/* 选择所有具有title属性的元素 */
[title]
{
  color: red;
}

伪类选择器：

伪类选择器用于选择某种状态下的元素，例如链接在悬浮或点击后的状态，例如：

/* 选择所有未访问的链接元素 */
a:link
{
  color: blue;
}
/* 选择所有鼠标悬浮的链接元素 */
a:hover
{
  text-decoration: underline;
}
/* 选择所有被点击的链接元素 */
a:active
{
  color: red;
}

伪元素选择器：

伪元素选择器用于表示不属于文档树的独立元素，例如添加一个元素到段落的开头，例如：

/* 在每个段落之前添加一个“→”符号 */
p::before
{
  content: "→ ";
}

2. 盒子模型

盒子模型是CSS用来定义 HTML 元素的布局及特征的基础。CSS3中引入了新的盒子模型属性box-sizing，它用于设置元素的盒子模型是否考虑边框和填充，取值包括content-box和border-box两种，其中：

- content-box：元素的宽度只包含内容部分，不包括边框和填充。

- border-box：元素的宽度包括内容、边框和填充。

例如以下代码：

.box {
  width: 100px;
  height:100px;
  padding: 10px;
  border 5px solid black;
  box-sizing: border-box;
}

上述代码中，width和height表示元素的大小，padding和border表示填充和边框，box-sizing则指定盒子模型为border-box。

3. 渐变

CSS3中新增了线性渐变和径向渐变两种，它们可以在元素的背景中实现平滑的过渡效果。

线性渐变：

线性渐变从一种颜色到另一种颜色进行平滑的过渡。其中，关键字to可以用来指定方向。

以下代码实现从上到下的线性渐变：

.gradient {
  background: linear-gradient(to bottom, #ffffff, #000000);
}

径向渐变：

径向渐变也是从一种颜色到另一种颜色进行平滑的过渡，不同的是它的渐变效果是以圆心为础的。

以下代码实现从内向外的径向渐变：

.gradient {
  background: radial-gradient(circle at center, #ffffff, #000000);
}

4. 过渡

过渡用于在两个状态之间进行平滑的过渡效果，常常用于改变某些属性的值。3中通过transition属性来实现过渡动画，其中包括过渡时间、延迟时间、过渡属性等。

以下代码实现当鼠标经过按钮时，字体颜色会从黑色变为白色的过渡效果：

.btn {
  color: black;
  transition: color 0.5s ease-out;
}
.btn:hover {
  color: white;
}

上述代码中，btn类表示按钮元素，color属性表示字体颜色，transition属性则指定过渡时间为0.5秒，过渡效果为ease-out，在按钮鼠标经过状态时，color属性的值会从黑色渐变到白色。

5. 动画

动画是一种更加复杂的过渡方式，与过渡不同的是它能够创建复杂的交互和动态效果，常用于网页游戏、在线广告等场景。CSS3中通过@keyframes规则来定义动画，通过animation属性来绑定元素的动画效果。

以下代码实现当页面加载完成后，圆形背景颜色会循环变换：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
  animation: circle-color 5s alternate infinite;
}
@keyframes circle-color {
  0% { background-color: blue; }
  50% { background-color: yellow; }
  100% { background-color: red; }
}

上述代码中，circle类表示圆形元素，width和height属性表示大小，border-radius表示圆角，background-color表示背景颜色，animation属性指定动画名称为circle-color，动画时间为5秒，循环模式为alternate，循环次数为无次。@keyframes规则中定义了每个关键帧时的背景颜色值，0%表示开始状态，50%表示中间状态，100%表示结束状态。

6. 变形

变形用通过CSS改变元素的形状、大小和位置等图形特征。CSS3中引入了多种变形函数和属性，常用的包括：

translate：平移变形，常用于改变元素的位置，例如将元素向右下方平移20像素：

.box {
  transform: translate(20px, 20px);
}

scale：缩变形，常用于放大或缩小元素，例如将元素放大到原来2倍大小：

.box {
  transform: scale(2);
}

rotate：旋转变形，常用于对元素进行顺时针或逆时针旋转，例如将元素顺时针旋转45度：

.box {
  transform: rotate(45deg);
}

7. 媒体查询

媒体查询是一种允许开发人员基于浏览器视口的大小、设备类型、屏幕分辨率等因素来应用不同样式的CSS3技术。它可以使得网站更加响应式，适应不同大小的设备和分辨率。

以下代码表示当屏幕宽度小于等于480像素时，字体大小为12像素，否则字体大小为16像素：

@media screen and (max-width: 480px) {
  p {
    font-size: 12px;
  }
}
@media screen and (min-width: 481px) {
  p {
    font-size: 16px;
  }
}

上述代码中，@media规则用于指定屏幕宽度的最大和最小值，当满足条件时，p元素的字体大小会发生变化。

总结

CSS3为web开发者提供了更多的选择，使得开发者可以更加容易地实现想要的网页效果。CSS3引入了许多新特性，包括选择器、盒子模型、渐变、过渡、动画、变形、媒体查询等。同时，它也适合用来处理HTML5和JavaScript前端技术，可谓web前端开发三者之一。要成为一名优秀的web前端开发者需要深入了解CSS3的语法和特性，注重细节和体验。

总的来说，CSS3的使用可以极大地提升网页的可读性、可维护性和用户体验。与此同时，也可以让开发者更加有效地利用页面空间、控制网页排版和排列方式，实现更美观、易用的用户界面。

当然，CSS3的学习过程需要付出时间和努力，但相信只要有耐心和热情，掌握令人满意的CSS3技能并不是很难的事情。