[分享]css中border可以实现什么图形

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属性的不同设置，我们可以实现很多形状的效果。我们需要学会使用这些属性，将编写出更加生动有趣的网页效果。