在box-shadow

时间：2018-04-09 11:30:13

标签： javascript html css

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

enter image description here

问题是并非所有角落都有边界半径。这是因为父级具有最大宽度，而border-radius仅适用于跨度的末端。

有解决方法吗？也许用JS？要检测每个新行并添加另一个带有边框半径的背景？由于响应能力，我无法在跨度中添加中断。在桌面版上，它是一条长线。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<body>

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

</body
＆＃13;
＆＃13;
＆＃13;

问题：如何让所有角落都有边框半径？没有编辑html？

2 个答案:

答案 0 :(得分：5)

得到了解决方案。我不得不添加

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

答案 1 :(得分：0)

这是 hacky 伪解决方案，仅适用于1行或2行文本：

h1 span {
  padding: 5px;
  border-radius: 4px;
  font-size: 40px;
  line-height: 58px;
  color: white;
  z-index:0;
  position:relative;
}
h1:before {
  content:"";
  position:absolute;
  top:0;
  height:56px;
  left:-20px;
  right:-20px;
  background:#272e3a;
  border-radius:5px;
  z-index:-2;
}
h1:after {
  content:"";
  position:absolute;
  bottom:2px;
  height:56px;
  left:-20px;
  right:-20px;
  background:#fff;
  border-radius:5px;
  z-index:-2;
}
h1 span:after {
  content:"";
  position:absolute;
  bottom:0;
  height:56px;
  left:-20px;
  right:-20px;
  background:#272e3a;
  border-radius:5px;
  z-index:-1;
}

h1 {
  position:relative;
  max-width: 400px;
  z-index:0;
}

body {
  padding: 50px;
}
<h1><span>Lorem ipsum dolor sit amet</span></h1>

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

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

相关问题
最新问题