css 完成矩形框4个边角加粗的方式

日期:2021-03-02 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

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: ⑸px;
            top: ⑸px;
            padding: 15px;
            border-style: solid;
            border-color: rebeccapurple;
            border-width: 5px 0 0 5px;
        }
        .main span:nth-child(2){
            position: absolute;
            right: ⑸px;
            top: ⑸px;
            padding: 15px;
            border-style: solid;
            border-color: rebeccapurple;
            border-width: 5px 5px 0 0;
        }
        .main span:nth-child(3){
            position: absolute;
            right: ⑸px;
            bottom: ⑸px;
            padding: 15px;
            border-style: solid;
            border-color: rebeccapurple;
            border-width: 0 5px 5px 0;
        }
        .main span:nth-child(4){
            position: absolute;
            left: ⑸px;
            bottom: ⑸px;
            padding: 15px;
            border-style: solid;
            border-color: rebeccapurple;
            border-width: 0 0 5px 5px;
        }

基本原理很简易, 要是搞清position:relative,border和left,top之间的关联便可以了

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。