css是一种用于网页设计的样式表语言，css3是css的升级版，提供了更多的样式和特效。在这篇文章中，我们将探讨css3的写法，以便您能够更好地应用它。
一、选择器
在CSS3中，有很多新的选择器可用于选择不同的 HTML 元素，这些选择器包括：
- 属性选择器
使用属性选择器，你可以根据元素的属性值选择元素。例如，以下 CSS 规则将选择所有 title 属性值为"example"的元素：
[title=example] {
color: red;
}- 子串匹配选择器
子串匹配选择器允许您根据属性值中的子字符串选择元素。以下是一个使用 * 匹配元素的示例：
立即学习“前端免费学习笔记（深入）”；
a[href*="example"] {
color: red;
}这会选择所有 href 属性值包含字符串 "example" 的锚元素。
- 伪元素选择器
CSS3 还增加了一些新的伪元素选择器，它们可以为元素的某些部分添加样式，例如：
p::first-letter {
font-size: 200%;
}
p::first-line {
color: red;
}上面的规则将改变段落中第一个字母的字体大小，以及第一行文本的颜色。
二、新特性
CSS3还提供了很多新的特性，包括：
- 圆角
border-radius: 50%;
上面的代码将使元素有圆角。
- 渐变
使用渐变可以为元素添加平滑的色彩过渡。以下是一个使用渐变的示例：
background: linear-gradient(to bottom right, red, yellow);
这会将元素的背景从左上角渐变到右下角，从红色到黄色。
- 盒子阴影
CSS3 还提供了新的盒子阴影属性，您可以使用这些属性对一个元素添加阴影。例如：
box-shadow: 10px 10px 5px grey;
上面的规则将在元素右下角添加阴影。
- 过渡
过渡效果可以使元素的变化更加平滑。以下是一个使用过渡的示例：
transition: width 2s;
这会使元素的宽度从一个值变化到另一个值的过程变成两秒钟。
- 动画
动画可以让元素变得更加有趣和生动。以下是一个使用动画的示例：
animation: example 5s infinite;
这会为元素添加一个名为 "example" 的动画，时长为 5 秒，并且会一直循环播放。
三、浏览器兼容性
需要注意的是，CSS3 的特性在不同的浏览器中有不同的兼容性。为了确保您的网站在所有浏览器中都能正常运行，您应该使用一些技巧来实现浏览器支持。
一种解决方案是使用浏览器前缀，在 CSS 属性前添加-vendor-前缀，这样不同的浏览器就能够正确地解析你的代码。例如：
-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
您还可以使用 CSS 预处理器，如 Sass 或 Less，它们可以让 CSS 编写更加简洁，而且还能提供一些功能，例如混合和变量。
总之，CSS3 提供了很多新的特性和选择器，可以让网页设计更加生动和有趣。了解这些新的特性和写法，可以让你的网页更具吸引力，为用户带来更好的体验。
