有什么 idea 可以使用渐变在CSS中实现自定义边框,使其看起来与下图完全一样

enter image description here

推荐答案

在实体边框上添加虚线边框.

body {
  background: #ccc;
}
div {
   width: 200px;
   height: 50px;
   border: 2px solid #fff;
   position: relative;
}
div::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed black;
    margin: -2px;
}
<div></div>

Css相关问答推荐

如何将表格单元格的最后一个子级与单元格底部对齐?

MUI Reaction移除焦点上的轮廓边框

我的css是我的react 应用程序没有按预期工作

在最小和最大视口之间时具有固定值的 CSS 钳位

仅 Select 嵌套 div 的底部,而不知道它们的嵌套程度

创建一个CSS动画的对角线线条.

背景上带有文本的按钮的反转 colored颜色

根据选项 colored颜色 更改 Select 文本 colored颜色

如何在保持默认外观的同时更改 javaFX 中按钮的突出显示 colored颜色

在 SVG 元素上方添加标签而不移动 SVG 元素

如何使用 TailwindCSS 水平设置输入和按钮

CSS中元素的重叠

带填充的水平边框

如何仅包装左侧内容

BEM 块、命名和嵌套

通过javascript删除或禁用浏览器的焦点边框

如何根据容器大小设置字体大小?

从样式设置为 % 的元素获取宽度(以像素为单位)?

我如何*真正*证明 HTML+CSS 中的水平菜单?

堆叠半透明盒子的 colored颜色 取决于订单?