在box-shadow上使用边框半径

Question

在box-shadow上使用边框半径

6

下面代码的结果是这张图片：

问题在于并非所有的角都有边框半径。这是因为父元素具有最大宽度，而边框半径仅适用于 span 的末端。

是否有解决方法？也许可以使用 JS？检测每个新行并添加具有边框半径背景的另一个 span？由于响应式设计，无法在 span 中添加换行符。在桌面版本中，它是一行长文本。

h1 span {
    background-color: #272e3a;
    -webkit-box-shadow: 20px 0 0 #272e3a, -20px 0 0 #272e3a;
    box-shadow: 20px 0 0 #272e3a, -20px 0 0 #272e3a;
    padding: 5px;
    border-radius: 4px;
    font-size:40px;
    line-height: 58px;
    color:white !important;
}

h1 {
    color: white !important;
    max-width: 400px;
}

body {
    padding:50px;
}

<body>

<h1><span>Lorem ipsum dolor sit amet</span></h1>

</body

问题：如何使所有角都有边框半径？不编辑HTML怎么办？

- Bob

2

这实际上是 box-decoration-break 的一个使用案例（而不是 box-shadow 的解决方法）... 但 IE/Edge 仍然无动于衷。 - CBroe

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bob · Accepted Answer

得到了解决方案。我必须添加

。

box-decoration-break: clone;

并且

word-break: break-word;

h1 span {
    background-color: #272e3a;
    -webkit-box-shadow: 20px 0 0 #272e3a, -20px 0 0 #272e3a;
    box-shadow: 20px 0 0 #272e3a, -20px 0 0 #272e3a;
    padding: 5px;
    border-radius: 4px;
    font-size:40px;
    line-height: 58px;
    color:white !important;
    -webkit-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    word-break: break-word;
}

h1 {
    color: white !important;
    max-width: 400px;
}

body {
    padding:50px;
}

<body>

<h1><span>Lorem ipsum dolor sit amet</span></h1>

</body