css实现矩形边角加粗     
                                        
">
志在指尖
用双手敲打未来

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

css 实现矩形四个边角加粗的方法-css+div教程

1、工具/原料

  • html
  • css

2、具体实现

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

效果图

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技术网站 » css 实现矩形四个边角加粗的方法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

志在指尖 用双手敲打未来

登录/注册IT技术大全

热门IT技术

C#基础入门   SQL server数据库   系统SEO学习教程   WordPress小技巧   WordPress插件   脚本与源码下载