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;
}
实现二：在元素四周各绝对定位一个块级元素，给这个元素添加对应的边框即可。相对简单，代码不再演示。