当前位置：文江博客话题详情

边框不透明？

发布于 2024-10-18 00:22:24 字数 203 浏览 8 评论 0原文

在 CSS 中如何制作不透明的边框？ RGBA 颜色对我不起作用...

JSFiddle 是自我解释的。

边框中有暗角，并且在其后面可见该元素的背景，而不是其后面的其他元素。

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

给我一枪 2024-10-25 00:22:24

可能有更好的方法，但这可行：

现场演示

基本上，只需使用包装器 div 并将 rgba 设置为背景即可。

HTML：

<div id="boxOuter">
    <div id="box">THANK YOU!</div>
</div>

CSS：

#box{
    background-color:#ccc;font-weight:bold;
    text-align:center;
    line-height:100px;
    height:100px;
    vertical-align:middle;
    font-size:20px;
}
#boxOuter {
    background: rgba(0,0,0,0.5); width:300px; padding: 10px;
    margin-left:25px;
}

阅读此答案的注释，了解如何使此方法 (rgba) 在旧版浏览器中工作。

一种不使用包装器的方法：

使用 outline而不是 border，它看起来可以接受：

outline: 10px solid rgba(0,0,0,0.5)

现场演示（这是您的确切代码，更改了一个单词）

（我在这里丝毫不考虑 IE）

查看这篇文章：

http://css-tricks.com/transparent-borders-with-background-clip/

There might be a better way, but this works:

Live Demo

Basically, just use a wrapper div with the rgba set as a background.

HTML:

<div id="boxOuter">
    <div id="box">THANK YOU!</div>
</div>

CSS:

#box{
    background-color:#ccc;font-weight:bold;
    text-align:center;
    line-height:100px;
    height:100px;
    vertical-align:middle;
    font-size:20px;
}
#boxOuter {
    background: rgba(0,0,0,0.5); width:300px; padding: 10px;
    margin-left:25px;
}

Read the comments to this answer to see how to make this method (rgba) work with older browsers.

A way to do it without using a wrapper:

Use outline instead of border, it looks acceptable: