gpt4 book ai didi

javascript - 在 box-shadow 上使用边框半径

转载 作者:太空狗 更新时间:2023-10-29 15:02:56 25 4
gpt4 key购买 nike

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

enter image description here

问题是不是所有的 Angular 都有边界半径。这是因为父级具有最大宽度,而 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

问题:如何让所有的 Angular 都有border radius?不编辑 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

关于javascript - 在 box-shadow 上使用边框半径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49731899/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com