首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS:突出显示的文本效果

CSS:突出显示的文本效果
EN

Stack Overflow用户
提问于 2013-09-12 00:34:08
回答 4查看 44.1K关注 0票数 4

我试图用一些填充来产生突出显示的文本效果,但是填充只应用于开头和结尾,而不是新行。

代码语言:javascript
复制
#highlight {
background: rgba(255,230,0,0.5);
padding: 3px 5px;
margin: -3px -5px;
line-height: 1.7;
border-radius: 3px;
}

<span id=highlight>text<br>here</span>

请查看此处:http://jsfiddle.net/CNJZK/7/

有没有什么纯CSS修复可以让内部(“锐利”)的边缘延伸得更远一点?例如,如下图所示:http://i.imgur.com/j8mIJZS.jpg

EN

回答 4

Stack Overflow用户

发布于 2014-08-06 16:35:29

如果您不局限于特定的超文本标记语言标准,那么可以看看HTML5中引入的<mark>标记。This site会给你一个快速的概述。

希望它能帮上忙!

票数 3
EN

Stack Overflow用户

发布于 2018-06-10 03:57:19

如果有人还在寻找答案:

代码语言:javascript
复制
p {
    box-shadow: 0px 0px 0px 5px yellow;
    display: inline;
    line-height: 2;
    margin: -5px -5px;
    background-color: yellow;
    border-radius: 1px;
}

See jsfiddle here.

票数 1
EN

Stack Overflow用户

发布于 2019-01-15 16:24:35

解决方案是这样的CSS:

代码语言:javascript
复制
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
display: inline;

https://css-tricks.com/almanac/properties/b/box-decoration-break/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18746649

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档