成长小笔记

gaara 发布于2019-08-29 13:30 / 2261人阅读

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部分

   
  
效果如图显示

总结

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

云服务器 GPU云服务器企业成长成长历程成长经历成长之路

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112644.html

成长小笔记

css3中的boder 简单来说就是我们经常用的边框，大家肯定都知道它的作用了，一个非常基础的用法 showImg(https://segmentfault.com/img/remote/1460000011338725); 还可以定义各种奇形怪状的边框类型，可以单独设它的上下左右边框 showImg(https://segmentfault.com/img/remote/1460000...

Noodles 2019-08-30 15:53 评论0 收藏0
一位技术校招生在支付宝的成长笔记

摘要：但是，努力和幸运，让鲁直的人生轨迹逐渐发生变化。在中间件团队年的挑战与成长学习使人进步如愿以偿，鲁直进入了蚂蚁金服中间件团队，但这并不意味着是一片坦途。鲁直告诉笔者，开源的意义就是给技术的发展装上轮子。哪有那么多的逆袭，唯有努力与坚持，机会就会在前方。鲁直，1989年生，本科毕业于浙江工业大学，之后被校招进阿里巴巴。虽然，今年刚刚30岁，但他已是蚂蚁金服SOFA中间件开源负责人。 ...

Leo_chen 2019-06-24 18:17 评论0 收藏0
【总结】我们2018年的关键词-坚持学习

摘要：因为涉及业务敏感话题，本文只记录我们学习的历程。我由衷的感谢团队的小伙伴们，感谢你们的坚韧不拔，感谢你们的持续成长。这个变化只是在每天的坚持和刻意练习中发生的，是那么的神奇。因为涉及业务敏感话题，本文只记录我们学习的历程。关于坚持从2016年起，我们团队坚持每天早晨8:50-10:30的100分钟早晨讨论，到现在已经两年了，期间没有中断过。我由衷的感谢团队的小伙伴们，感谢你们...

Imfan 2019-07-01 11:06 评论0 收藏0
【总结】我们2018年的关键词-坚持学习

摘要：因为涉及业务敏感话题，本文只记录我们学习的历程。我由衷的感谢团队的小伙伴们，感谢你们的坚韧不拔，感谢你们的持续成长。这个变化只是在每天的坚持和刻意练习中发生的，是那么的神奇。因为涉及业务敏感话题，本文只记录我们学习的历程。关于坚持从2016年起，我们团队坚持每天早晨8:50-10:30的100分钟早晨讨论，到现在已经两年了，期间没有中断过。我由衷的感谢团队的小伙伴们，感谢你们...

xingpingz 2019-07-25 14:34 评论0 收藏0