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: ‘>>‘：只在火狐浏览器下有效
原文地址：https://www.cnblogs.com/qjuly/p/9028213.html
时间： 2024-10-12 16:38:09