css 实现矩形四个边角加粗的方法

前端  /  管理员 发布于 7年前   205

1、工具/原料

  • html
  • css

2、具体实现

效果图

html代码

<body>    <h1 style="color: red">css实现矩形边角加粗</h1>    <div class="main">        <span></span>        <span></span>        <span></span>        <span></span>    </div></body>

css代码

        body{display: flex;justify-content: center;flex-direction: column;align-items: center;        }        .main{position: relative;width: 400px;height: 200px;border: 1px solid red;        }        .main span:nth-child(1){position: absolute;left: -5px;top: -5px;padding: 15px;border-style: solid;border-color: rebeccapurple;border-width: 5px 0 0 5px;        }        .main span:nth-child(2){position: absolute;right: -5px;top: -5px;padding: 15px;border-style: solid;border-color: rebeccapurple;border-width: 5px 5px 0 0;        }        .main span:nth-child(3){position: absolute;right: -5px;bottom: -5px;padding: 15px;border-style: solid;border-color: rebeccapurple;border-width: 0 5px 5px 0;        }        .main span:nth-child(4){position: absolute;left: -5px;bottom: -5px;padding: 15px;border-style: solid;border-color: rebeccapurple;border-width: 0 0 5px 5px;        }

原理很简单， 只要弄清position:relative,border和left,top之间的关系就可以了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


  • 上一条：
    CSS中提升优先级属性!important的用法问题总结
    下一条：
    div+css样式自制带小三角的tooltips效果

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客