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;
}

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