html - 如何使用 CSS 制作半透明边框？

Question

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

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，但它不起作用。

Answer 1

使用background-clip在 padding 上，因为它是离边界最近的框模型。默认为 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;
  
}

<div></div>