成长小笔记

css3中的boder

简单来说就是我们经常用的边框，大家肯定都知道它的作用了，一个非常基础的用法

还可以定义各种奇形怪状的边框类型， 可以单独设它的上下左右边框

css样式

border:20px solid;  
border-left-color:orangered;
border-top-color:brown;
border-right-color:cornflowerblue;
border-bottom-color:green;  

效果如下：

如果不给上图div的宽和高的话，就会是下面这种情况：

用boder画三角形

可以在上述的代码中进行一些修改
加上

 
border-width: 15px 0 15px 30px;
border-style: solid;
border-color:orangered green;  

就有以下的效果：

距离形成三角形还差一步，哈哈，这个时候要用上透明来实现

border-top-color:transparent ;
border-bottom-color: transparent;  

根据自己的需要进行调节

用boder画数字8

还是直接看样式吧

css样式

   .circle_1{
        margin: 100px auto;
        width: 20px;
        height: 20px;
        line-height: 80px;
        background: white;
        border:5px solid cadetblue;
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        transform: rotate(-45deg);
    }
    .circle_1::after{
        content: "";
        position: absolute;
        top: 22px;
        left: 20px;
        width: 20px;
        height: 20px;
        border:5px solid cadetblue;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        transform: rotate(96deg);
    }

html部分

<div class="box_">
    <div class="circle_1"></div>
</div>  

效果如图显示

总结

看了这篇文章有没有觉得border很有趣呢，生活中常见的一些形状都可以用它来实现哟。
能用border做的形状可以不用再用图片来代替了