长方形四个角 CSS 实现

 

 上述样式排版：

<style>
    .box {
        width: 500px;
        height: 500px;
        background: #ccc;
    }
    .box .rect {
        position: absolute; 
        top: 20px;
        left: 20px; 
        width: 400px; 
        height: 100px; 
        background: linear-gradient(to left, #fff, #fff) left top no-repeat, 
                    linear-gradient(to bottom, #fff, #fff) left top no-repeat, 
                    linear-gradient(to left, #fff, #fff) right top no-repeat,
                    linear-gradient(to bottom, #fff, #fff) right top no-repeat, 
                    linear-gradient(to left, #fff, #fff) left bottom no-repeat,
                    linear-gradient(to bottom, #fff, #fff) left bottom no-repeat,
                    linear-gradient(to left, #fff, #fff) right bottom no-repeat,
                    linear-gradient(to left, #fff, #fff) right bottom no-repeat;
        background-size: 4px 20px, 20px 4px, 4px 20px, 20px 4px;  
        font-size: 30px;
        color: #fff;
        line-height: 100px;
        text-align: center;
    }
</style>
<body>
    <div class="box">
      <div class="rect">北京大学公共卫生学院</div>
    </div>
</body>

 

posted @ 2021-04-07 14:26  Freya～  阅读(500)  评论(0)    收藏  举报