CSS给元素的四个角添加边框

Css给元素的四个角添加边框

实现一：

<div class="border"></div>

/*使用线性渐变背景表示  left top 表示左上角*/
.border{
background:
          linear-gradient(to left, #04c886, #04c886) left top no-repeat,
          linear-gradient(to bottom, #04c886, #04c886) left top no-repeat,
          linear-gradient(to left, #04c886, #04c886) right top no-repeat,
          linear-gradient(to bottom, #04c886, #04c886) right top no-repeat,
          linear-gradient(to left, #04c886, #04c886) left bottom no-repeat,
          linear-gradient(to bottom, #04c886, #04c886) left bottom no-repeat,
          linear-gradient(to left, #04c886, #04c886) right bottom no-repeat,
          linear-gradient(to left, #04c886, #04c886) right bottom no-repeat;
 /*10px是长度 1px是粗细*/
        background-size:
          1px 10px,
          10px 1px,
          1px 10px,
          10px 1px;
}

实现二：在元素四周各绝对定位一个块级元素，给这个元素添加对应的边框即可。相对简单，代码不再演示。

原文地址：https://blog.csdn.net/weixin_55800388/article/details/143972533

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！