前端 - 请教一个css问题？

Question

大佬们，这种边框都有哪些方法实现啊

。。。。

Answer 1

codepen

Answer 2

实现的方式有很多，一般来说，常用的功能也就不自己一点点去实现，而是直接使用工具，比如这个。
https://csstrick.alipay.com/trick/tips

Answer 3

由于我无法直接看到您提供的图片，所以无法直接分析图片中的边框效果。但我可以告诉您一些常见的CSS边框实现方法。以下是一些常用的CSS属性和技巧，用于创建和定制边框：

1. border-style：用于定义边框的样式，如solid（实线）、dashed（虚线）、dotted（点线）等。

div {  border-style: solid;}

2. border-width：用于定义边框的宽度，可以使用像素值（如2px）或其他相对单位（如em、rem）。

div {  border-width: 2px;}

3. border-color：用于定义边框的颜色。

div {  border-color: #333;}

4. border-radius：用于定义边框的圆角程度。

div {  border-radius: 10px;}

5. box-shadow：用于添加边框外的阴影效果，可以模拟更复杂的边框效果。

div {  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}

6. outline：与border类似，但outline不会影响元素的布局。

div {  outline: 2px solid red;}

7. 使用伪元素（::before 或 ::after）：可以通过添加伪元素并使用边框属性，在元素周围创建额外的边框效果。

div::before {  content: "";  position: absolute;  top: -10px;  left: -10px;  right: -10px;  bottom: -10px;  border: 2px solid red;  z-index: -1;}

如果您能提供更多关于您想要的边框效果的细节或图片，我可以给出更具体的CSS实现方法。