css制作方框
使用 border 属性制作方框
通过 CSS 的 border 属性可以快速为元素添加方框边框。以下是一个基本示例：
.box {
border: 2px solid #000;
width: 200px;
height: 200px;
}border 属性是简写形式，分别设置边框宽度、样式和颜色。支持多种边框样式：
solid：实线dashed：虚线dotted：点线double：双线
单独设置各边边框
如果需要为方框的每条边设置不同的样式：
.box {
border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double purple;
}圆角方框
使用 border-radius 属性可以为方框添加圆角：
.rounded-box {
border: 2px solid #000;
border-radius: 10px;
width: 200px;
height: 200px;
}要创建圆形，可以将 border-radius 设置为 50%：
.circle {
border: 2px solid #000;
border-radius: 50%;
width: 200px;
height: 200px;
}阴影效果
通过 box-shadow 属性可以为方框添加阴影：
.shadow-box {
border: 1px solid #ddd;
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
width: 200px;
height: 200px;
}透明边框
使用 RGBA 颜色值可以创建半透明边框：
.transparent-border {
border: 10px solid rgba(0,0,0,0.5);
width: 200px;
height: 200px;
}渐变边框
虽然 CSS 不直接支持渐变边框，但可以通过伪元素实现：
.gradient-border {
position: relative;
width: 200px;
height: 200px;
}
.gradient-border::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(45deg, red, blue);
z-index: -1;
}响应式方框
使用百分比或视口单位可以创建响应式方框：
.responsive-box {
border: 2px solid #000;
width: 50%;
height: 50vw;
max-width: 300px;
max-height: 300px;
}
