我想创建一个高亮效果,类似于用笔制作的高光.即它有波浪形的顶部和底部以及粗略的开始和结束,如图所示.
在CSS中执行此操作的最佳方法是什么?有没有办法不使用背景图像?此外,它的工作将行换行.
理想情况下,解决方案将采用如下所示的HTML并使其看起来像图像.
<p> <span class='green-highlight>So write with a combination of short,medium,and long sentences. Create a sound that pleases the reader's ear. </span> <span class='pink-highlight'>Don't just write words. </span> <span class='yellow-highlight'>Write music. </span </p>
解决方法
不使用背景颜色..没有.
背景延伸到元素的边缘,这些边缘总是矩形的(限制边界半径)
在这种情况下,背景图像可能是最佳选择……但是:
您可以使用多个文本阴影来实现类似的效果.
一个简短的例子.
.green-highlight { text-shadow: 3px 0px 3px green,-3px 0px 3px green,6px 0px 6px green,-6px 0px 6px green; } .red-highlight { text-shadow: 3px 0px 3px red,-3px 0px 3px red,6px 0px 6px red,-6px 0px 6px red; } .yellow-highlight { text-shadow: -3px 0px 3px yellow,3px 0px 3px yellow,6px 0px 6px yellow,-6px 0px 6px yellow; }
<p> <span class="green-highlight">So write with a combination of short,and long sentences. Create a sound that pleases the reader's ear. </span> <span class="red-highlight">Don't just write words. </span> <span class="yellow-highlight">Write music. </span </p>
这只需要使用尽可能多的阴影来获得所需的全部效果,
原文地址:https://www.jb51.cc/html/226173.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。