html 边界移动线性渐变背景[副本]

biswetbf 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(137)

此问题在此处已有答案：

Weird effect when applying transparent border over an element with a gradient background（7个答案）
2天前关闭。
我有一个div，其中一个background定义为linear-gradient，在它上面有一个几乎透明的border。它应该可以正确绘制，但是渲染失败了。

Here is the associated CodePen .

body {
  background: black;
}

.gradient-background {
  background: linear-gradient(270deg, #681c2e 0%, #232a6c 49.48%);
  height: 80px;
  border: solid 20px rgba(248, 251, 255, 0.1);
}

<div class="gradient-background"></div>

你知道如何用CSS解决这个问题吗？它在Chrome和Firefox上的表现是一致的。这是CSS和HTML规范中的预期行为吗？

Html

来源：https://stackoverflow.com/questions/74786736/border-shifting-linear-gradient-background

1条答案

按热度按时间

vecaoik11#

rgba(248, 251, 255, 0.1);是导致问题的原因。
使用background-origin: border-box;，它会工作得很好。

body {
  background: black;
}

.gradient-background {
  background: linear-gradient(270deg, #681c2e 0%, #232a6c 49.48%);
  height: 80px;
  border: solid 20px rgba(248, 251, 255, 0.1);
  background-origin: border-box;
}

<html>
  <body>
    <div class="gradient-background"></div>
  </body>
</html>

有关详细信息，请查看此source。

赞(0）回复(0）举报 2022-12-16

我来回答

html 边界移动线性渐变背景[副本]

1条答案

相关问题

热门标签

最新问答