CSS3文本效果总结

tech2024-06-06 69

text-shadow 文本阴影

text-shadow具有的属性和描述

属性描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊的距离。color可选。阴影的颜色

text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0

简写语法:

text-shadow: h-shadow v-shadow blur color;

示例

文字阴影模糊效果代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字阴影展示</title> <style> h1 {text-shadow:2px 2px 8px #FF0000;} </style> </head> <body> <h1>无所不能的林大王</h1> </body> </html>

效果

白色文字上的文字阴影代码 <html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字阴影展示</title> <style> h1 { color:white; text-shadow:2px 2px 4px #000000; } </style> </head> <body> <h1>无所不能的林大王</h1> </body> </html>

效果

氖辉光文字阴影代码 <html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字阴影展示</title> <style> h1 { text-shadow:0 0 3px #FF0000; } </style> </head> <body> <h1>无所不能的林大王</h1> </body> </html>

效果

Text-Overflow属性控制溢出文本样式

CSS3文本溢出属性指定应向用户如何显示溢出内容

Text Overflow具有的属性和描述

属性值clip修剪文本ellipsis显示省略符号来代表被修剪的文本string使用给定的字符串来代表被修剪的文本

简写语法

text-overflow: clip|ellipsis|string;

示例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-overflow</title> <style> div.test { white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000; } </style> </head> <body> <p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p> <p>div 使用 "text-overflow:ellipsis":</p> <div class="test" style="text-overflow:ellipsis;">哈哈哈! 林大王上天入地无所不能</div> <p>div 使用 "text-overflow:clip":</p> <div class="test" style="text-overflow:clip;">哈哈哈! 林大王上天入地无所不能</div> <p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p> <div class="test" style="text-overflow:'>>';">哈哈哈! 林大王上天入地无所不能</div> </body> </html>

效果

word-wrap 属性控制文本换行

word-wrap具有的值和描述

值描述normal只在允许的断字点换行（浏览器保持默认处理）。break-word在长单词或 URL 地址内部进行换行

语法

word-wrap: normal|break-word;

示例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>word-wrap文本折行</title> <style> p.test { width:11em; border:1px solid #000000; word-wrap:break-word; } </style> </head> <body> <p class="test">世界是你们的，也是我们的，但是归根结底是你们的。你们青年人朝气蓬勃，正在兴旺时期，好像早晨八九点钟的太阳。希望寄托在你们身上！</p> </body> </html>

效果

其他文本属性

属性值hanging-punctuation规定标点字符是否位于线框之外punctuation-trim规定是否对标点字符进行修剪text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行text-emphasis向元素的文本应用重点标记以及重点标记的前景色text-justify规定当 text-align 设置为 “justify” 时所使用的对齐方法text-outline规定文本的轮廓text-overflow规定当文本溢出包含元素时发生的事情text-shadow向文本添加阴影text-wrap规定文本的换行规则word-break规定非中日韩文本的换行规则word-wrap允许对长的不可分割的单词进行分割并换行到下一行

最新回复(0)