100种漂亮边框

单线边框：

css
border: 1px solid #000;

双线边框：

css
border: 2px double #333;

圆角边框：

css
border-radius: 10px;
border: 1px solid #555;

阴影边框：

css
border: 1px solid #999;
box-shadow: 3px 3px 5px #888888;

渐变边框：

css
border: 2px solid;
border-image: linear-gradient(to right, #ffcc00, #ff6666);
border-image-slice: 1;

波浪边框：

css
border: 2px solid #66ccff;
border-radius: 10px;
box-shadow: 0 0 5px #66ccff;

斜线边框：

css
border: 2px solid #009688;
border-image: linear-gradient(45deg, transparent 50%, #009688 50%);
border-image-slice: 1;

点线边框：

css
border: 1px dotted #555;

悬浮边框：

css
border: 2px solid #ff9900;
transition: border 0.3s ease-in-out;
&:hover {
  border: 2px solid #ff3366;
}

图片边框：

css
border: 10px solid transparent;
border-image: url('your-image.jpg') 30% round;

空心按钮边框：

css
border: 2px solid #3498db;
color: #3498db;
background-color: transparent;

拼接边框：

css
border-top: 2px solid #ffcc00;
border-right: 2px solid #ff6666;
border-bottom: 2px solid #33cc33;
border-left: 2px solid #3366cc;

带标签的边框：

css
border: 2px solid #555;
border-radius: 8px;
position: relative;
&::before {
  content: '标签';
  display: block;
  position: absolute;
  top: -12px;
  left: 50%;
  background-color: #555;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  transform: translateX(-50%);
}

泡泡边框：

css
border: 2px solid #ffcc00;
border-radius: 50%;
padding: 20px;

斑马纹边框：

css
border: 1px dashed #999;
background: repeating-linear-gradient(45deg, #fff, #fff 10px, #ccc 10px, #ccc 20px);

这些是一些创意和漂亮的边框样式，您可以根据您的具体需求进行调整和修改。希望这些示例对您有帮助！