html - CSS滤镜亮度: can it be applied separately to border and body of one element?

Question

这个元素已经应用了filter: brightness(50%):

.element {
  width: 300px;
  height: 250px;
  border: 5px solid white;
  padding: 2px;
  background-color: darkblue;
  color: white;
  filter: brightness(50%);
}

<div class="element">
  <p>element has brightness of 50%</p>
  <p>I want the border to have brightness of 100%</p>
  <p>How could one do this?</p>
</div>

我想弄清楚如何将 CSS filter: brightness(100%) 仅应用于元素的边框。几个小时的搜索在线文档没有产生任何结果。如果它很简单，请原谅我，但要重申我如何独立地将 CSS filter: brightness() 应用于已经应用了亮度的元素的边框？

Answer 1

为背景使用伪元素，然后仅将过滤器应用于子元素和背景。这样边框就不会受到滤镜的影响，您将获得相同的视觉效果:

.element {
  width: 300px;
  height: 250px;
  padding: 2px;
  background-color: darkblue;
  border:5px solid #fff;
  color: white;
  position:relative;
  z-index:0;
}
.element:before {
  content:"";
  position:absolute;
  z-index:-1;
  background:darkblue;
  top:0;
  left:0;
  right:0;
  bottom:0;
  filter:brightness(50%);
}
.element > * {
  filter:brightness(50%);
}

body {
  background:pink;
}

<div class="element">
  <p>element has brightness of 50%</p>
  <p>I want the border to have brightness of 100%</p>
  <p>How could one do this?</p>
</div>