CSS中的border属性可以用于实现很多有趣的图形效果,下面我们来一一了解。1. 实现边框动画box{ border: 2px solid transparent; transition: bord
CSS中的border属性可以用于实现很多有趣的图形效果,下面我们来一一了解。
1. 实现边框动画
box{ border: 2px solid transparent; transition: border 0.5s; } box:hover{ border-color: red; }
2. 实现高亮边框
box{ border: 2px solid #ccc; } box:focus{ border-color: blue; }
3. 实现三角形
triangle{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
4. 实现圆形
circle{ width: 100px; height: 100px; border-radius: 50%; background-color: blue; }
5. 实现梯形
trapezoid{ height: 0; width: 100px; border-top: 50px solid red; border-right: 25px solid transparent; border-left: 25px solid transparent; }
总结:
通过border属性的不同设置,我们可以实现很多形状的效果。我们需要学会使用这些属性,将编写出更加生动有趣的网页效果。
粉丝
0
关注
0
收藏
0