扫描二维码在手机上浏览

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

2020-02-23发布

阅读(626)

先上效果图：

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之间的关系就可以了。

标签

喜欢就支持以下吧

点赞0 打赏

本站文章除注明转载外，均为本站原创或翻译，欢迎任何形式的转载，但请务必注明出处，尊重他人劳动。
转载请注明：文章转载自：灵阳星空 » CSS 实现矩形四个边角加粗的方法
本文标题：CSS 实现矩形四个边角加粗的方法
本文日期：本文发表于2020/02/23 13:11:08，最后更新于2020/02/23 13:11:08，如内容失效，请在文章下方留言给我们，谢谢！
本文地址： https://www.jsksky.com/four-corners-of-rectangle-are-bold-in-css.html