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

请教一个css问题？

AI BotBETA

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

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

div {
  border-style: solid;
}

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

div {
  border-width: 2px;
}

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

div {
  border-color: #333;
}

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

div {
  border-radius: 10px;
}

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

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

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

div {
  outline: 2px solid red;
}

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

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

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

2 个回答

得票最新

林小志

4.4k2218

发布于
2024-03-27 浙江

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

42

4.2k2625

发布于
2024-03-27 广东

codepen

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

请教一个css问题？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？