CSS3文字效果
栏目:
CSS3参考手册
发布时间:2024-11-01
一、文本阴影(Text Shadow)
CSS3 引入了 text-shadow
属性,可以给文本添加阴影效果。该属性接受四个参数:水平阴影的位置、垂直阴影的位置、阴影的模糊距离和阴影的颜色。
例如:
.text {
text-shadow: 2px 2px 4px #000000;
}
tides.cn
二、文字装饰线(Text Decoration)
CSS3 增加了 text-decoration
属性的一些新值,包括 text-decoration-color
、text-decoration-style
和 text-decoration-thickness
。这些值可以用来控制文本装饰线的颜色、样式和粗细。
例如:
.text {
text-decoration: underline wavy red;
}
tides.cn
三、文字溢出(Text Overflow)
CSS3 中的 text-overflow
属性用于处理文本溢出容器的问题。该属性接受两个值:clip
和 ellipsis
。clip
将裁剪超出容器的文本,而 ellipsis
将用省略号代替超出容器的文本。
例如:
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
四、文字换行(Word Wrapping)
CSS3 中 的 word-wrap
属性用于控制自动换行行为。该属性接受两个值:normal
和 break-word
。normal
表示不强制换行,而 break-word
表示允许在单词内换行。
1、word-wrap: break-word 效果
p {
word-wrap: break-word;
}
word-wrap: break-word; word-wrap: break-word; word-wrap: break-word; word-wrap: break-word; word-wrap: break-word;
2、word-wrap: normal 效果
p {
word-wrap: normal;
}
word-wrap: normal; word-wrap: normal; word-wrap: normal; word-wrap: normal; word-wrap: normal;
本文地址:https://www.tides.cn/p_docs-css3-text-effects