我对 CSS\HTML 还是很陌生。我如何通过 CSS 做同样的事情:
我试过了:
.works_title {
display: inline;
padding: 3px;
font-size: 28px;
font-weight: 700;
color: aliceblue;
background-color: #000;
border-radius: 4px;
}
body {
max-width:300px;
}
<div class="works_title">Something long, like a title with bunch of letters</div>
但它看起来不像 Instagram 故事编辑器中的样子。我在网络中需要这样的东西。谢谢!
最佳答案
您可以使用 box-decoration-break: clone;
然后考虑使用 SVG 过滤器以使效果更好。
更新 stdDeviation
变量以控制形状:
.works_title {
display: inline;
padding: 4px 6px;
line-height:1.4; /* adjust this to avoid overlapping the padding */
font-size: 28px;
font-weight: 700;
color: aliceblue;
background-color: red;
border-radius: 4px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
filter: url('#instagram');
}
.no-filter {
filter:none;
}
body {
max-width: 250px;
}
<div class="works_title">Something longlike a title with bunchofletters a more text</div>
<br>
<br>
<div class="works_title no-filter">Something longlike a title with bunchofletters a more text</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="instagram">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -8" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
关于html - 如何通过 CSS 在文本后面添加一个突出显示,使其看起来像下面的 Instagram-one?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62341132/