1. 选择器：
通用选择器：
* {
/* 适用于所有元素 */
margin: 0;
padding: 0;
}
属性选择器：
/* 选择所有包含 title 属性的元素 */
[title] {
color: blue;
}
/* 选择 title 属性值以 "blog" 开头的元素 */
[title^="blog"] {
font-weight: bold;
}
伪类和伪元素：
/* 鼠标悬停时应用样式 */
a:hover {
text-decoration: underline;
}
/* 选择第一个子元素 */
li:first-child {
font-weight: bold;
}
/* 选择第一个段落中的第一个字 */
p::first-letter {
font-size: 150%;
}
2. 边框和圆角：
圆角：
/* 圆角为 5 像素 */
div {
border-radius: 5px;
}
/* 水平和垂直方向分别指定不同的圆角半径 */
div {
border-top-left-radius: 10px;
border-bottom-right-radius: 20px;
}
边框图像：
/* 使用图片作为边框 */
div {
border-image: url(border.png) 30 30 round;
}
3. 渐变：
线性渐变：
/* 从左上到右下的渐变 */
div {
background: linear-gradient(to bottom right, red, yellow);
}
径向渐变：
/* 从中心向外的径向渐变 */
div {
background: radial-gradient(circle at center, red, yellow);
}
4. 动画：
/* 定义一个简单的旋转动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 应用动画到元素 */
div {
animation: rotate 2s linear infinite;
}
5. 阴影：
/* 添加盒子阴影 */
div {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
/* 添加文本阴影 */
h1 {
text-shadow: 2px 2px 4px #999;
}
6. 字体和文字效果：
字体引入：
/* 使用 Google Fonts 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
body {
font-family: 'Open Sans', sans-serif;
}
文字效果：
/* 文字描边效果 */
h1 {
color: white;
-webkit-text-stroke: 2px black;
}
/* 文字渐变效果 */
h2 {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
以上只是 CSS3 中一些常见特性的简单示例。要深入了解每个特性的详细用法和更高级的应用，请参考CSS3的官方文档或其他相关资源。CSS3 的灵活性和功能强大的特性使得前端开发者能够创建出更丰富、交互性更强的用户界面。
转载请注明出处：http://www.zyzy.cn/article/detail/12556/CSS