css制作漂亮边框

使用CSS边框属性

通过border属性可以快速设置边框样式、宽度和颜色。例如：

.box {
  border: 2px solid #3498db;
}

• solid表示实线，还可使用dotted（点线）、dashed（虚线）等
• 颜色支持HEX、RGB或颜色名称

圆角边框设计

border-radius属性可创建圆角效果：

.rounded {
  border-radius: 10px;
  border: 1px solid #e74c3c;
}

• 值越大圆角越明显
• 可单独设置四个角：border-top-left-radius

渐变边框实现

结合伪元素和背景渐变：

.gradient-border {
  position: relative;
  background: white;
  padding: 20px;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 3px;
  background: linear-gradient(45deg, purple, orange);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

阴影增强效果

box-shadow为边框添加立体感：

.shadow-border {
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0,0,0,0.1),
              inset 0 0 5px rgba(0,0,0,0.05);
}

• 外阴影和內阴影可组合使用
• 多个阴影用逗号分隔

自定义图形边框

使用clip-path创建特殊形状：

.custom-shape {
  border: 2px solid #2ecc71;
  clip-path: polygon(
    0% 20%,
    60% 20%,
    60% 0%,
    100% 50%,
    60% 100%,
    60% 80%,
    0% 80%
  );
}

动画边框效果

通过CSS动画让边框动起来：

@keyframes pulse {
  0% { border-color: #ff0000; }
  50% { border-color: #0000ff; }
  100% { border-color: #ff0000; }
}
.animated-border {
  border: 3px solid;
  animation: pulse 2s infinite;
}

双色边框技巧

利用outline实现双边框：

.double-border {
  border: 3px solid #3498db;
  outline: 3px solid #e74c3c;
  outline-offset: 3px;
}

图片边框

使用border-image属性：

.image-border {
  border: 10px solid transparent;
  border-image: url('border.png') 30 round;
}