javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:首页 > 网站技术 > DivCss教程 > 

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

来源:IT技术网编辑:雨天发布于:2017-10-12人围观

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

与相关的文章
有时间的话来看看IT界的突发事件