CSS3边框不透明度？-Java 学习之路

348

是否有一种直接的CSS方式使元素的边框半透明，例如：

border-opacity:0.7;

？

如果没有，有没有人知道如何在不使用图像的情况下这样做？

8 回答

试试这个：

<h2>Snippet for making borders transparent</h2>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</div>
<div id="transparentBorder">
  This &lt;div&gt; has transparent borders.
</div>

这是我们神奇的CSS ..

* {
  padding: 10pt;
  font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
}

b {
  font-weight: bold;
}

i {
  font-style: oblique;
}

H2 {
  font-size: 2em;
}

div[id='transparentBorder'] {
  height: 100px;
  width: 200px;
  padding: 10px;
  position: absolute;
  top: 40%;
  left: 30%;
  text-align: center;
  background: Black;
  border-radius: 4px;
  border: 10pt solid rgba(0, 0, 0, 0.5);
  -moz-background-clip: border;
  /* Firefox 3.6 */
  -webkit-background-clip: border;
  /* Safari 4? Chrome 6? */
  background-clip: border-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  text-align: center;
  margin: 0;
  color: #fff;
  cursor: pointer;
}

在这里查看Demo .

回复于 2024-05-05T02:12:02+08:00

0

作为在某些情况下可能有效的替代解决方案：将 border-style 更改为 dotted .

在前景色和背景色之间具有交替的像素组与部分透明像素的连续线不同 . 另一方面，这需要显着减少CSS，并且在没有任何特定于浏览器的指令的情况下，它在每个浏览器上更加兼容 .

回复于 2024-05-05T02:12:02+08:00
12
不幸的是 opacity 元素使整个元素（包括任何文本）半透明 . 使边框半透明的最佳方法是使用rgba颜色格式 . 例如，这会产生50％不透明度的红色边框：
```
div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
```
这种方法的问题在于某些浏览器不理解 rgba 格式，如果这是整个声明，则根本不会显示任何边框 . 解决方案是提供两个边界声明 . 第一个是假的不透明度，第二个是实际的 . 如果浏览器有能力，它将使用第二个，如果没有，它将使用第一个 .
```
div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
```
第一个边框声明将是与白色背景上50％不透明红色边框相同的颜色（尽管边框下方的任何图形都不会渗透） .

UPDATE: 我在评论中提出了建议，即使应用了坚实的背景颜色，也要确保边框保持透明 .
回复于 2024-05-05T02:12:02+08:00
129
这很容易，使用0偏移的实心阴影：
```
#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}
```
此外，如果您为该元素设置border-radius，它会为您提供相当圆的边框

jsFiddle Demo
回复于 2024-05-05T02:12:02+08:00
5
正如其他人所提到的：CSS-3表示您可以使用 rgba(...) 语法指定具有不透明度（alpha）值的边框颜色 .

here's a quick example如果您想查看它 .
- 适用于Safari和Chrome（可能适用于所有webkit浏览器） .
- 适用于Firefox
- 我怀疑它在IE中是否有效，但我怀疑有一些过滤器或行为可以使它工作 .
还有this stackoverflow post，它提出了一些其他问题 - 即边界呈现在您指定的任何背景颜色（或背景图像）的顶部;因此在许多情况下限制了边界α的有用性 .
回复于 2024-05-05T02:12:02+08:00
5
如果您使用W3C验证器检查CSS编码，您将看到您的CSS代码是否可接受，即使它在主要浏览器中有效 .

通过CSS创建透明边框，如上所述，
```
border: 1px solid rgba(255, 0, 0, .5);
```
W3C标准不接受，甚至CSS3也不接受 . 我使用直接输入验证器和以下CSS代码，
```
.test { border: 1px solid rgba(255, 0, 0, .5); }
```
结果是，

值错误：border无法识别太多值或值：1px solid rgba（255,0,0,0.5）

不幸的是，作为边界颜色值的一部分，W3C不接受alpha值（“rgb”末尾的字母“a”） . 我不知道它为什么不标准化，因为它适用于所有浏览器 . 唯一的障碍是你是想要坚持W3C标准还是从它开始在CSS中创造一些东西 .

要使用W3C online CSS validator / Direct Input .

使用验证器来检查您的工作总是一个好主意，它确实有助于在编码工作数小时后进行交叉编码时发现编码中的小错误甚至是大错误 .
回复于 2024-05-05T02:12:02+08:00

550

*据我所知，在这种情况下我没有正常做的是在下方创建一个具有更大尺寸的块（（bordersize * 2）originalsize）并使其透明使用

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

这是一个例子

#main{
    width:400px;
    overflow:hidden;
    position:relative;
}
.border{
    width:100%;
    position:absolute;
    height:100%;
    background-color:#F00;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.content{
    margin:15px;/*size of border*/
    background-color:black;
}
<div id="main">
    <div class="border">
    </div>
    <div class="content">
        testing
    </div>
</div>

Update:

这个答案已经过时了，因为毕竟这个问题已经超过8年了 . 今天所有最新的浏览器都支持rgba，框阴影等 . 但这是8年前的一个不错的例子 .

回复于 2024-05-05T02:12:02+08:00

其他答案涉及border-opacity问题的技术方面，而我想提出一个hack（纯CSS和HTML） . 基本上创建一个容器div，有一个边界div，然后是内容div .

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>
</div>

然后是CSS :(将内容边框设置为none，注意定位以便考虑边框厚度）

.container {
  width: 20vw;
  height: 20vw;
  position: relative;
}
.border-box {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  opacity: 0.5;
}
.content-box {
  width: 100%;
  height: 100%;
  border: none;
  background: green;
  top: 5px;
  left: 5px;
  position: absolute;
}

回复于 2024-05-05T02:12:02+08:00

CSS3边框不透明度？

8 回答

相关问题