如何从不透明度变化中排除边框

Question

我有这个CSS：

#name { 
    border: 1px solid #fff;
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
}

然而边框的不透明度也设置为0.3，但我不希望边框具有不透明度，如何排除此元素？

Answer 1

你做不到。 opacity设置整个元素的不透明度。根据元素的实际内容，您有两种选择：

1. 将整个内容包裹在<div>中，然后将边框应用于该内容。
2. 如果只有文字和/或背景，请使用rgba指定文字颜色和/或背景颜色/渐变而不是opacity。

Answer 2

将HTML结构更改为：

<div id="name">
    <div>
       Stuff
    </div>
<div>

和CSS：

#name { 
    border: 1px solid #fff;
}

#name div { 
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
}

Answer 3

您可以添加带边框的容器和不透明度的内容：

<div id="container" style="border:1px solid #fff">
  <div id="name">
   --------
   </div>
</div>

Answer 4

您可以创建容器。

#name {
    border: 1px solid #fff;
    color: #a5a5a5;
    font-size: 11px;
    font-family: times new roman;
}

.op3 {
    opacity: 0.3;
}

<div id="name">
    <div class="op3">
       <!-- content -->
    </div>
</div>

Answer 5

试试这个

#name { 
    border: 1px solid #fff;
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
    height: 50px;
}

#name:after {
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 1);
    content: '';
    display: block;
}