仅使用CSS从所选文本中删除文本阴影

  • 本文关键字:文本 删除 阴影 CSS css
  • 更新时间 :
  • 英文 :


我设计了一些文本的样式,使其具有微弱的白色文本阴影,这样当它在相同颜色的背景上通过时,它的样式是清晰的。问题在于,当我选择文本时,由于文本阴影与文本颜色相同,阅读起来会变得困难。

body {
background-color: #CCC;
margin: 0px;
}
div {
padding: 1.5em;
}
div + div {
margin: 2em 0 0;
}
div p:last-child {
margin: 0em;
}
p {
text-shadow: 0 0 3px #FFF;
margin: 0 0 1em;
}
.actual-effect ::selection {
text-shadow: none;
}
.intended-effect p {
text-shadow: none;
}
<div class="actual-effect">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://loripsum.net/" target="_blank">Optime, inquam.</a> Istam voluptatem, inquit, Epicurus ignorat? Inde igitur, inquit, ordiendum est. Eam tum adesse, cum dolor omnis absit; Ne discipulum abducam, times. </p>
<p><i>Certe non potest.</i> <mark>Honesta oratio, Socratica, Platonis etiam.</mark> <a href="http://loripsum.net/" target="_blank">Duo Reges: constructio interrete.</a> Recte dicis; Hoc loco tenere se Triarius non potuit. </p>
<p>Non igitur bene. Utram tandem linguam nescio? <b>Quis est tam dissimile homini.</b> Quae sequuntur igitur? Quod ea non occurrentia fingunt, vincunt Aristonem; Hoc ipsum elegantius poni meliusque potuit. </p>
</div>
<div class="intended-effect">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://loripsum.net/" target="_blank">Optime, inquam.</a> Istam voluptatem, inquit, Epicurus ignorat? Inde igitur, inquit, ordiendum est. Eam tum adesse, cum dolor omnis absit; Ne discipulum abducam, times. </p>
<p><i>Certe non potest.</i> <mark>Honesta oratio, Socratica, Platonis etiam.</mark> <a href="http://loripsum.net/" target="_blank">Duo Reges: constructio interrete.</a> Recte dicis; Hoc loco tenere se Triarius non potuit. </p>
<p>Non igitur bene. Utram tandem linguam nescio? <b>Quis est tam dissimile homini.</b> Quae sequuntur igitur? Quod ea non occurrentia fingunt, vincunt Aristonem; Hoc ipsum elegantius poni meliusque potuit. </p>
</div>

我不知道其他浏览器是如何渲染的,但目前在Firefox中,它准确地删除了文本阴影,但它失去了如果我没有更改它的话它会有的所有默认样式(即白色文本、蓝色背景、与特定背景并置时的倒置颜色等)。

有没有一种方法可以在不丢失所有默认值的情况下修改::选择?我宁愿不重新添加所有默认样式,除非这是唯一可用的选项。

问题不是避免文本阴影使阅读变得困难,更重要的是避免p::selection丢失其他所有内容。

很抱歉之前的回答。您可以将text-shadow设置为0 0 0

示例:

body {
background-color: #CCC;
margin: 0px;
padding: 1.5em;
}
p {
text-shadow: 0 0 3px #FFF;
margin: 0 0 1em;
}
::selection {
text-shadow: 0 0 0 !important;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://loripsum.net/" target="_blank">Optime, inquam.</a> Istam voluptatem, inquit, Epicurus ignorat? Inde igitur, inquit, ordiendum est. Eam tum adesse, cum dolor omnis absit; Ne discipulum abducam, times. </p>
<p><i>Certe non potest.</i> <mark>Honesta oratio, Socratica, Platonis etiam.</mark> <a href="http://loripsum.net/" target="_blank">Duo Reges: constructio interrete.</a> Recte dicis; Hoc loco tenere se Triarius non potuit. </p>
<p>Non igitur bene. Utram tandem linguam nescio? <b>Quis est tam dissimile homini.</b> Quae sequuntur igitur? Quod ea non occurrentia fingunt, vincunt Aristonem; Hoc ipsum elegantius poni meliusque potuit. </p>

以前的回答(不满意)

这是因为背景,改变它。我正在尝试使用background-color: transparent,但它不起作用。因此,在这段代码中,我使用background-color: #fff

p {
text-shadow: 2px 2px #FF0000;
}
p::selection {
background-color: #fff;
text-shadow: none;
}
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem numquam, laboriosam distinctio impedit qui explicabo corporis optio commodi officiis ratione voluptates corrupti, temporibus iusto recusandae facilis nobis obcaecati nisi quisquam iste ullam excepturi iure. Ratione, molestiae mollitia vitae, error soluta illum ex accusamus voluptatem tempora hic aut rerum! Recusandae impedit consectetur consequatur dolorum, dolore aut officiis nam tenetur aliquid repudiandae natus velit sapiente vero esse, dolor quasi illo at consequuntur aperiam explicabo iusto corporis ex fugit architecto? Placeat, unde suscipit expedita enim ab vel iste cumque quas, asperiores adipisci accusamus? Et, minus. Saepe magni quo, ipsam enim earum placeat voluptates.</p>

最新更新