用css制作方框
使用 CSS 制作方框
基础方框
通过 border 属性可以快速创建一个方框。以下是一个简单的示例：
.box {
width: 200px;
height: 200px;
border: 2px solid #000;
}width和height定义方框的尺寸。border设置边框的宽度、样式和颜色。
圆角方框
使用 border-radius 属性可以为方框添加圆角：
.rounded-box {
width: 200px;
height: 200px;
border: 2px solid #000;
border-radius: 10px;
}border-radius的值越大，圆角越明显。
阴影效果
通过 box-shadow 可以为方框添加阴影：
.shadow-box {
width: 200px;
height: 200px;
border: 2px solid #000;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}box-shadow的参数依次为水平偏移、垂直偏移、模糊半径和颜色。
渐变边框
使用 background-clip 和 padding 可以模拟渐变边框：
.gradient-box {
width: 200px;
height: 200px;
padding: 2px;
background: linear-gradient(45deg, #ff0000, #0000ff);
background-clip: content-box;
}padding定义边框的宽度。background设置渐变颜色。
虚线边框
通过 border-style 可以创建虚线边框：
.dashed-box {
width: 200px;
height: 200px;
border: 2px dashed #000;
}dashed表示虚线样式，也可以用dotted表示点线。
响应式方框
使用百分比或 vw/vh 单位可以让方框适应不同屏幕尺寸：
.responsive-box {
width: 50vw;
height: 50vh;
border: 2px solid #000;
}vw和vh分别表示视口宽度和高度的百分比。
这些方法可以根据需求灵活组合，实现多样化的方框效果。
