css3特性教学 |css 二级下拉

边框效果

CSS3提供了许多新的边框效果。你可以使用border-radius属性来创建圆角边框，使用box-shadow属性来创建阴影边框，也可以使用border-image属性来创建自定义边框。例如：

.box {
border-radius: 10px;
box-shadow: 0 0 10px #000;
border-image: url(border.png) 30 30 round;
}

上面的代码创建了一个带有圆角和阴影效果的边框，并且使用了自定义边框图片。

过渡效果

CSS3提供了transition属性，可以让你创建平滑的过渡效果。例如：

.box {
transition: background-color 1s ease-in-out;
}
.box:hover {
background-color: #f00;
}

上面的代码创建了一个当鼠标悬停在元素上时，背景颜色会平滑地过渡为红色的效果。

动画效果

CSS3提供了animation属性，可以让你创建复杂的动画效果。例如：

.box {
animation: move 1s ease-in-out infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}

上面的代码创建了一个水平移动的动画效果，会无限循环地播放。

媒体查询

媒体查询是CSS3一个非常重要的特性，它可以根据设备的宽度，自动适配不同的布局和样式。例如：

@media screen and (max-width: 768px) {
.box {
width: 100%;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
.box {
width: 50%;
}
}
@media screen and (min-width: 1025px) {
.box {
width: 30%;
}
}

上面的代码根据设备的宽度，自动适配不同的元素宽度。

总结

CSS3提供了很多新的特性，可以让WEB页面更加漂亮，更加具有吸引力。以上是其中一些常用的特性，希望对你有所帮助。