CSS3是一种用于实现网页设计的标记语言。它的出现使得网页设计更加丰富多彩。下面介绍几个CSS3常用的技巧。1. 边框渐变.box { border: 5px solid; borderimage: ...
CSS3是一种用于实现网页设计的标记语言。它的出现使得网页设计更加丰富多彩。下面介绍几个CSS3常用的技巧。
1. 边框渐变
.box {
border: 5px solid;
border-image: linear-gradient(to right, #007aff, #ffd200);
border-image-slice: 1;
} 这段代码可以将边框设置为从左到右渐变的蓝色和黄色。
2. 阴影效果
.box {
box-shadow: 10px 10px 20px #ccc;
} 这段代码可以给元素添加一个10px偏移的阴影效果。
3. 文字描边
.heading {
-webkit-text-stroke: 1px black;
} 这段代码可以让文字描上1px的黑色边框。
4. 动画效果
.box {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} 这段代码可以让元素旋转360度,并且每2秒钟重复一次。
以上就是CSS3的一些常用技巧。通过使用CSS3,可以让网页设计更加生动和有趣。