Chrome和Firefox中box-shadow的不同行为

Question

Chrome和Firefox中box-shadow的不同行为

我想创建这样的东西:

我准备了以下测试页面:

p {
  display: inline;
  background-color: yellow;
  box-shadow: 10px 0px 0px red, -10px 0px 0px red;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <p>Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.
    Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text.
    Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text.
    Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.</p>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

但是,Chrome和Firefox的结果会有所不同.从我的观点来看,Chrome版本还可以,但我不喜欢Firefox中的结果.

铬

火狐

有没有什么方法可以在Firefox中实现与Chrome相同的结果？我愿意接受任何解决方案,没有必要使用box-shadow财产.

Answer 1

Ily*_*syn 3

这不是box-decoration-break:clone你所追求的吗？

p {
  display: inline;
  background-color: yellow;
  box-shadow: 10px 0px 0px red, -10px 0px 0px red;
  box-decoration-break: clone;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <p>Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.
    Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text.
    Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text.
    Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.</p>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，3 月前
查看次数：	209 次
最近记录：	8 年，3 月前