在box-shadow上使用border radius
Bob*_*Bob 6 html javascript css
下面代码的结果是这个图像:
问题是并非所有角落都有边界半径.这是因为父级具有最大宽度,而border-radius仅适用于跨度的末端.
有解决方法吗？也许用JS？要检测每个新行并添加另一个带有边框半径的背景？由于响应能力,我无法在跨度中添加中断.在桌面版本上,它是一条长线.
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？
得到了解决方案.我不得不补充一下
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| 归档时间： |
|
| 查看次数： |
78 次 |
| 最近记录： |