如何使用 CSS 制作半透明边框？答案

【问题标题】：How do I make a semi-transparent border with CSS?如何使用 CSS 制作半透明边框？
【发布时间】：2016-12-04 11:52:08
【问题描述】：

我有一个弹出窗口，我想给它一个透明的边框。我设置了这些属性：

li.sub-nav ul.megamenu {
    position: absolute;
    left: 0;
    margin-top: 10px;
    z-index: 100;
    padding-top: 3px;
    -moz-background-clip: border; /* Firefox 3.6 */
    -webkit-background-clip: border; /* Safari 4? Chrome 6? */
    background-clip: border-box;
}

.nav-top-container .megamenu {
    background: #005525;
    background: rgba(0, 85, 37, .98);
    border-top: 1px solid #227b33;
    border-bottom: #005525;
    border-bottom:8px solid rgba(0, 85, 37, .98);
}

我根据this article添加了background-clip属性，我也尝试将其设置为content和padding，但它不起作用。

【问题讨论】：

你能做一个JSFiddle吗？我们需要一种方法来查看您所看到的内容。你的 CSS 有 display: none，这可能是你看不到它的原因。

标签： html css border transparency padding

【解决方案1】：

正如我在对@LGSon 的评论中指出的那样，您感到沮丧的问题是您的元素的background 延伸到了边界区域。一个简单的解决方法是将该背景应用于嵌套元素，如下例所示：

https://jsfiddle.net/yqx7abd8/

body {
  background: url(http://lorempixel.com/800/800/city/1) center / cover;
}

.border {
  margin: 30px;
  border: 15px solid rgba(255,0,0,0.3);
}

.content {
  background: #fff;
  padding: 30px;
}

<div class="border">
  <div class="content">
    <p>
    My Content
    </p>
  </div>
</div>

【讨论】：

【解决方案2】：

在padding 上使用background-clip，因为它是最接近边框的盒子模型。默认为border，这会使背景位于透明边框的后面。

body {
  background: yellow;
}
div {
  padding: 30px;
  background-color: white;
  border: 15px solid rgba(255,0,0,0.5);

  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  
}

&lt;div&gt;&lt;/div&gt;

【讨论】：