text-shadow
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>css3文本</title> ?<style type="text/css"> ?* { ?????margin: 0; ?????padding: 0; ?} ?h1 { ?????text-shadow: 5px 5px 5px red; /*x轴,y轴,模糊程度,颜色*/ ?}</style></head><body> ?<h1>Marvel Comics</h1></body></html>效果如下：
CSS3文本溢出属性指定应向用户如何显示溢出内容
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>css3文本效果</title> ?<style type="text/css"> ?* { ?????margin: 0; ?????padding: 0; ?} ?div.test { ?????width: 12em; ?????white-space: nowrap; /*文本显示在一行*/ ?????overflow: hidden; ???/*超出文本的区域隐藏掉*/ ?????border: 1px solid #000; ?}</style></head><body> ?<div class="test" style="text-overflow: ellipsis;"> ???This is some long text that will not fit in the box ?</div> ?<div class="test"> ???This is some long text that will fit in the box ?</div> ?<div class="test" style="text-overflow: ‘>>‘"> ???This is some long text that will fit in the box ?</div></body></html>效果如下：
clip：默认
ellipsis:文本溢出显示省略号
text-overflow: ‘>>‘：只在火狐浏览器下有效
css3--文字效果
原文地址：https://www.cnblogs.com/qjuly/p/9028213.html