欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS:给元素加边框

程序员文章站 2022-07-01 20:30:15
...
<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; 
}
相关标签: 阿哈哈哈大前端