透明内部边框 | CSS-Tricks

<div class="inner-border">
    Transparent Inside Border
</div>

.inner-border {
    background: #000;
    color: #fff;
    margin: 50px;
    padding: 15px;
    position: relative;
}
.inner-border:before {
    border: 5px solid #000;
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
}

oboshto

# 2011 年 10 月 21 日

很棒的代码片段。谢谢，Chris。

Stijn

# 2011 年 11 月 10 日

你也可以用

.inner-border {
      outline: solid black 5px;
      outline-offset: 5px;
}

还是我弄错了？

Zach Saucier

评论永久链接# 2014 年 3 月 5 日

这在某些浏览器中存在渲染错误，而且也不允许使用圆角效果。

Mohsin @ startablog

# 2011 年 11 月 12 日

这段代码有什么用？我的意思是，我应该在哪里使用这种技术。

Jon

# 2012 年 8 月 13 日

实际上，Stijn 说的是对的。你只需要将偏移量设置为轮廓宽度的负值。

Mano

# 2012 年 10 月 6 日

Jon，使用 outline 属性在基于 Webkit 的浏览器中效果很好。但是 Firefox 的渲染效果不完美，而 IE 9 的渲染效果就像普通边框。

使用 Chris 的方法在所有这些浏览器中都有效。

payel

# 2014 年 5 月 19 日

你好，

谢谢，效果很好…
.inner-border {
background: #fff;
color: #626262;
padding: 15px;
position: relative;

}
.inner-border:before {
border: 4px solid #e7e7e7;
content: “”;
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
-moz-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
}

Sajidur Rahman

# 2014 年 6 月 20 日

你可以试试这个。我找到的最佳解决方案

-webkit-box-shadow: 0px 0px 0px 1px #fff;
box-shadow: 0px 0px 0px 1px #fff;

它不会添加任何额外的像素。

Manichandra

# 2016 年 5 月 5 日

“CHRIS COYIER” 给出的解决方案在不希望边框出现在所有侧边时非常有用。最佳解决方案。
使用 outline 和 box-shadow 我们无法选择边。

请查看下面的链接。

http://codepen.io/manichandra/pen/dMwKMg

评论

发表回复 取消回复

发表回复取消回复