CSS：给元素加边框

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