成长小笔记

css3中的boder

简单来讲就是咱们常常用的边框，你们确定都知道它的做用了，一个很是基础的用法 eg:border:1px solid black

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

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;

就有如下的效果：

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

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作的形状能够不用再用图片来代替了