css制作方框

使用 border 属性制作方框

通过 border 属性可以快速为元素添加方框。设置边框的宽度、样式和颜色即可实现：

.box {
  border: 2px solid #000; /* 宽度2px、实线、黑色 */
}

调整方框的圆角

使用 border-radius 属性可以让方框的角变圆：

.rounded-box {
  border: 2px solid #000;
  border-radius: 10px; /* 圆角半径10px */
}

为方框添加阴影

通过 box-shadow 属性可以为方框增加阴影效果：

.shadow-box {
  border: 2px solid #000;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 水平偏移、垂直偏移、模糊半径、颜色 */
}

使用 outline 制作外边框

outline 属性可以在元素外部添加边框，不影响布局：

.outline-box {
  outline: 3px dashed #ff0000; /* 宽度3px、虚线、红色 */
}

制作渐变边框

结合 border-image 和渐变函数可以实现渐变边框：

.gradient-box {
  border: 4px solid transparent;
  border-image: linear-gradient(to right, #ff0000, #00ff00) 1;
}