文字的装饰设计大全,html文本装饰

　　在CSS中，单词是我们每天都要处理的一大类。有了文字，就要修饰。

　　本文将讨论文本修饰的两个相对较新的概念，即文本修饰和文本强调。最后，它还将解释使用背景模拟文本下划线的一些有趣的动态效果。

text-decoration 文字装饰

　　 text-decoration的意思是文本修饰，从早期规范CSS Level 2(Revision 1)-Text-decoration就有了。比如大家熟知的下划线文字修饰：下划线。

　　p { text-decoration:下划线；}

　　而较新的CSS文本装饰模块level 3-text-decoration，文本装饰得到了很大的更新，演变成了文本装饰线条、文本装饰颜色、文本装饰样式、文本装饰粗细，这些还没有成为标准，是它们的缩写。

　　其中包括：

　　Text-decoration-line:控制用于设置元素中文本的装饰类型，无论是在文本下方、上方还是贯穿文本。文字装饰风格：不仅是实线，也类似于边框风格。它还支持双实线双，虚线虚线，虚线虚线和非常有趣的波浪线文字-装饰-颜色：这很好理解，控制颜色文字-装饰-厚度：控制装饰线的厚度。这里有一张非常好的图片可以帮助你快速理解：

　　代码笔演示-文本-装饰演示

　　文本装饰线可以同时设置

　　有趣的是，文本装饰线可以同时设置。

　　p { text-decoration-line:上划线下划线划线；}

　　我们可以得到上中下三条线。

　　文本装饰可用于过渡和动画

　　文本装饰的每一个价值都可以被转换和动画化。合理使用，有些文本强调的地方，是很有用的。

　　p class= transition lorem ipsum dolor/p . transition { text-decoration-line:underline；文字-装饰-颜色：透明；文字-装饰-厚度：0.1em光标：指针；过渡： 5s；hover { text-decoration-color:粉色；文字-装饰-粗细：0.15em颜色：粉色；}}

　　使用另一个属性text-underline-offset，我们也可以实现一个有趣的效果，如下图所示：

　　当然，上面的例子使用了文本-下划线-偏移的变换，但是CSS本身并不支持文本-下划线-偏移的过渡动画。这里借助CSS @property巧妙地实现了文本-下划线-偏移的过渡动画。有兴趣的话可以多了解一下CSS @property的用法。

　　CodePen演示-文本下划线过渡动画效果

　　文字-装饰-色彩与色彩分离。

　　文字-装饰-颜色可以和颜色不一样，类似于这个。颜色{ text-decoration-style:波浪形；光标：指针；过渡： 5s；hover { color:透明；文字-装饰-颜色：粉色；}}

　　有趣的是，在这之后，我们实际上得到了一条波浪线。

　　如果我们在元素的伪元素上加波浪下划线，然后在悬停时加一个动画，让波浪线移动，就得到一个非常好的强调悬停的效果：

　　p class= animation data-content= Lorem ibsum dolor Lorem ibsum dolor Lorem ibsum dolor/p . animation { position:relative；文字-装饰：无；溢出：隐藏；光标：指针；行高：2；*在{ content: attr(数据-内容)之前；位置：绝对；top:0；左：0；颜色：透明；空白：nowrap文本-装饰-线条：下划线；文字-装饰-风格：波浪型；文字-装饰-颜色：# 000；z索引：-1；} :hover:before {动画：移动3s无限线性；} } @关键帧移动{ 100% { transform:translate(-209 px，0)；}}

　　我们使用伪元素添加一个比文本本身还长的文本，颜色是透明的，但是设置了波浪线的颜色。然后在悬停的时候，通过移动伪元素的translate来移动波浪线，稍微调试translate的值，就可以让动画首尾相连，实现移动波浪线的效果。

　　文本装饰演示

text-emphasis 文字强调

　　文本强调是指文本强调。它是CSS文本装饰模块Level 3新增加的属性，用来增强文本强调的效果。

　　在早期，如果我们想强调几个词，我们可能会使用粗体和斜体，这是一种更传统的文本样式：

　　{ font-weight:bold；//加粗字体样式：斜体；//Italic}现在有一种有趣的强调方式——文字强调。

text-emphasis 语法

　　 text-emphasis包含text-emphasis和text-emphasis-position，允许我们在文本上方或下方添加不同的重音和不同的颜色。

　　看一个简单的演示：

　　这是span文本强调/span。/PP span { text-emphasis:circle；} Text-emphasis:circle的作用是给出被包裹的文字。在它的上面，添加一个圆形图形，也就是一个圆形图形。效果如下：

　　当然，默认是黑色，我们可以在圆圈后面加上颜色：

　　span { text-emphasis:circle # f00；}

　　除了圆形，还有很多种图形可供选择，还可以自定义传入的角色，甚至emoji表情：

　　keyword e F/span G H span class= word I J/span K L span class= e moji m N/span/p . keyword { text-emphasis:circle # f00；}.word { text-emphasis: x blue；}.表情符号{ text-emphasis: ；}

text-emphasis-position 语法

　　除了在文字上方，还可以在一定范围内改变强调图形的位置，选择放置在文字上方或下方，使用text-emphasis-position。

　　该属性接受上下左右参数：

　　text-emphasis-position: [上方下方] [右侧左侧]？关键词{ text-emphasis:circle # f00；}.word { text-emphasis: x blue；文本位置：在左侧上方；}.表情符号{ text-emphasis: ；文本位置：在左下方；}当文字布局的书写顺序为横向布局时，像writing-mode: lr，只需要使用over和under即可。当文本布局模式是垂直的，比如writing-mode: vertical-lr，你将只使用right或left关键字。

　　p {写入模式：垂直-rl；}.关键词{ text-emphasis:circle # f00；}.word { text-emphasis: x blue；文本位置：在左侧上方；}.表情符号{ text-emphasis: ；文本位置：在右侧下方；}

使用 background 模拟下划线

　　除了CSS原生提供的文本修饰和文本强调，我们还可以通过其他元素模拟一些文本修饰效果。

　　最常见的是用背景模拟下划线。

　　看一个简单的演示，使用背景来模拟文本的下划线效果：

　　这是肥胖精英们的共识。我们在彼得的商品市场上销售最好的葡萄酒，这种葡萄酒被认为是美味可口的。/pp {宽度：600px字体大小：24px颜色：# 666；}a {背景：线性渐变(90度，#0cc，# 0cc)；背景尺寸：100% 3px；背景-重复：不重复；背景-职位：100% 100%；颜色：# 0cc}使用背景模拟文字的下划线效果，效果图如下：

　　或者，使用背景模拟虚线下划线：

　　a {背景：线性渐变(90度，#0cc 50%，透明50%，透明1px)；背景尺寸：10px 2px背景-重复：重复-x；背景-职位：100% 100%；}

　　使用背景来模拟下划线和点线下划线。

　　当然这是最基本的，巧妙的利用背景的各种属性，我们可以达到各种有趣的效果。

　　巧妙改变背景大小和背景位置，实现文本悬停动态效果

　　在这里，通过巧妙地改变背景大小和背景位置的属性，我们可以实现一些非常有趣的文本悬停效果。

　　先看这样一个演示。核心代码作用于由P标签包装的A标签:

　　这是肥胖精英们的共识。我们在彼得的商品市场上销售最好的葡萄酒，这种葡萄酒被认为是美味可口的。/pa {背景：线性梯度(90deg，#ff3c41，#fc0，# 0e beff)；背景尺寸：0 ^ 3px；背景-重复：不重复；背景-位置：0 100%；过渡：1s all颜色：# 0cc} a:hover { background-size:100% 3px；颜色：# 000；}虽然，我们设置了背景：linear-gradient (90deg，# ff3c41，# fc0，# 0ebeff)，但是在开始的时候，它的background-size: 0 3px是默认的，也就是一开始看不到下划线。当鼠标悬停时，改变背景尺寸：100% 3px。这时候就会有从0.3px到100% 3px的转化，也就是从零开始的拉伸效果。

　　看看最后的效果：

　　由于设置的背景位置是0 100%，如果设置的背景位置是100% 100%，我们可以得到相反的效果：

　　//其他一切都是一致的，只是改变了背景位置，从0 100%到100% 100% a {.背景-职位：100% 100%；}再看看效果。可以对比一下上面的动画，看看具体区别在哪里：

　　CodePen演示-背景下划线动画

　　好的，如果我们用background实现两个重叠的下划线，然后用上面两个不同的background-position值，就可以得到一个更有趣的下划线悬停效果。

　　CSS代码示意图，注意背景模拟的两个下划线的背景位置的值是不同的：

　　a {背景：线性梯度(90度，#0cc，#0cc)，线性梯度(90度，#ff3c41，#fc0，# 8500 D8)；背景尺寸：100% 3px，0 3px背景-重复：不重复；背景-位置：100% 100%，0 100%；过渡：0.5s全部；颜色：# 0cc}a:hover { background-size: 0 3px，100% 3px；颜色：# 000；}可以得到这样的效果。事实上，每次悬停时，都有两条下划线在移动：

　　CodePen演示-背景下划线动画

最后

　　好了，本文到此结束，介绍一些文字修饰的有趣属性和动态效果，希望对你有所帮助。

　　更多精彩的CSS技术文章总结在我的Github - iCSS里，不断更新。欢迎订购明星订阅合集。

　　转到这篇关于解释CSS文本装饰文本装饰amp强调文本的文章到此为止。更多相关CSS文字修饰内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。