在CSS3中，除了使用标准的 border 属性来设置边框外，还可以使用其他属性或技巧来模拟边框效果。以下是一些常见的方法：
- 使用
box-shadow模拟边框：
box-shadow 属性可以用于在元素周围添加阴影效果，但也可以用来模拟边框。通过设置适当的水平和垂直偏移量（通常为0），以及模糊半径（也为0），你可以得到一个清晰的边框效果。
div {
width: 100px;
height: 100px;
background-color: lightblue;
box-shadow: 0 0 0 3px red; /* 水平偏移 垂直偏移 模糊半径 扩展半径 颜色 */
}
- 使用
outline属性：
outline 属性与 border 类似，但它不占用空间，也不会影响元素的布局。它通常用于突出显示元素，如输入框的聚焦状态。
div {
width: 100px;
height: 100px;
background-color: lightblue;
outline: 3px solid red; /* 宽度 样式 颜色 */
}
- 使用伪元素（
:before或:after）：
你可以使用伪元素来创建一个看起来像是边框的效果。这种方法更加灵活，允许你创建复杂的边框样式。
div {
position: relative;
width: 100px;
height: 100px;
background-color: lightblue;
}
div::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 3px solid red;
z-index: -1; /* 将伪元素放在原始元素之下 */
}
- 使用SVG：
对于更复杂的边框效果，如渐变或图案边框，你可以使用SVG。通过创建一个与元素大小相同的SVG，并在其中绘制所需的边框样式，你可以实现高度自定义的边框效果。
5. 使用CSS变量和Houdini属性：
对于更高级和实验性的用法，你可以考虑使用CSS Houdini或CSS变量来创建自定义的边框效果。这些技术目前可能不是所有浏览器都支持，但它们为创建独特的视觉效果提供了强大的工具。
6. 组合多个技术：
你也可以组合上述技术来创建复杂的边框效果。例如，你可以使用 box-shadow 来添加多层边框，或者使用伪元素和 transform 属性来创建斜向或弯曲的边框。
请注意，虽然这些方法都可以用来模拟边框效果，但它们在某些方面可能不同于标准的 border 属性。例如，box-shadow 和 outline 不会增加元素的实际尺寸，而伪元素方法可能会增加布局的复杂性。在选择最适合你的项目的方法时，请考虑这些因素。