<span class="rim">需要加邊框的元素</span>
◎ 方法一:border
.rim {
border: 1px solid black;
}
◎ 方法二:box-shadow
.rim {
box-shadow: 0 0 0 1px black;
}
◎ 方法三:outline
.rim {
outline: 1px solid black;
}
◎ 方法四:background-image
.rim {
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 + padding
.rim {
background-clip: content-box;
padding: 1px;
}
◎ 方法六:border + border-image
.rim {
border: 5px solid;
border-image: linear-gradient(red, black) 1;
}