Border-Box 透明边框答案

【问题标题】：Border-Box Transparent BorderBorder-Box 透明边框
【发布时间】：2023-03-14 03:32:01
【问题描述】：

我正在尝试使用边框框来创建在 3 列图像周围具有 50% 透明度黑色边框的效果。我已阅读该内容以使边框向内移动以使用填充，但我无法使其正常工作。

这是我的 CSS 代码：

div.column-image {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1em solid rgba(0, 0, 0, 0.5);
padding: 5px;
float: left;
}

这就是结果

我想要的是边框向内，这将使图片透过边框。

这是一个例子：

我尝试按照本教程中的示例进行操作：CSS Tricks: Transparent Borders with background-clip，但失败了。

请帮助我不知道该怎么办~

编辑：这是site的实时版本

【问题讨论】：

我想你想把这个CSS放在div上，然后把图像放在div里。您不想将其应用于图像本身。
我支持那个动作...查找关于CSS和HTML的“屏蔽”，你应该能够达到你想要的效果。

标签： css transparent border-box

【解决方案1】：

您是否愿意通过背景图像和框阴影解决方案来做到这一点？最好的做法是保持最小化并减少不必要的标记（在您的 CSS 和 HTML 中）。您只需要一个包含边框和图像的 div。

.transparent-bordered-image {
    background-image: url(http://your-url-here);
    background-size: cover;
    box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
   -webkit-box-shadow: inset 0 0 0 30px rgba(0,0,0,0.5);
}

这是一个例子： http://jsfiddle.net/fBY9z/1/

【讨论】：

【解决方案2】：

像这样？ jsFiddle example

我通过放置在包装 div 元素上的伪元素添加了边框。

遗憾的是，您不能在 img 本身上使用伪元素，正如规范所述：

12.1 :before 和 :after 伪元素 (reference)

注意。该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。

HTML

<div id="imgwrap">
    <img/>
</div>

CSS

#imgwrap {
    position:relative;
    display:inline-block;
}
#imgwrap:after {
    content:"\A";
    border:20px solid rgba(10, 0, 255, 0.5);
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    box-sizing: border-box;
    -wekbit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
img { vertical-align:top; }

【讨论】：