第188天 用css给一个元素加边框有哪些方法?
:scope {
border: 3px solid black;
box-shadow: 0 0 0 1px black; /*不影响布局,无限叠加*/
outline: 1px solid black; /*不支持圆角*/
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' stroke='%23000' fill='transparent'/%3E%3C/svg%3E");
background-clip: content-box; /*形成透明边框*/
padding: 1px;
border-image: linear-gradient(red, black) 1;
border: 1px solid;
}
/*1*/
.box{
border: 1px solid #000;
}
/*2*/
.box{
width: 100px;
height: 100px;
background-color: #ccc;
position: relative;
}
.box::after{
position: absolute;
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid #000;
}
Most helpful comment