CSS3 文本效果

在CSS3中,增加了丰富的文本修饰效果,使得网页更加美观舒服。下面列出了常用的CSS3文本属性:

CSS3文本属性


属性                说明


text-shadow    文字阴影    

text-overflow    文本溢出处理    

word-wrap    长单词或URL强制换行    

box-shadow  向框添加一个或多个阴影

word-break  规定自动换行的处理方法    


text-shadow属性

在CSS3中,我们可以使用text-shadow属性来实现文字的阴影效果。

语法: text-shadow:x-offset  y-offset  blur  color;

说明:

x-offset:(水平阴影)表示阴影的水平偏移距离,单位可以是px、em或者百分比等。如果值为正,则阴影向右偏移;如果值为负,则阴影向左偏移;

y-offset:(垂直阴影)表示阴影的垂直偏移距离,单位可以是px、em或者百分比等。如果值为正,则阴影向下偏移;如果值为负,则阴影向上偏移;

blur:(模糊距离)表示阴影的模糊程度,单位可以是px、em或者百分比等。blur值不能为负。如果值越大,则阴影越模糊;如果值越小,则阴影越清晰。当然,如果不需要阴影模糊效果,可以吧blur值设置为0;

color:(阴影的颜色)表示阴影的颜色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
    p{   
         text-align:center;   
         margin:0;   
         font-family: helvetica,arial,sans-serif;   
         color:#999;   
         font-size:80px;   
         font-weight:bold;   
         text-shadow:10px 10px #333;   
       }   
</style>  
</head>  
<body>  
    <p>Text Shadow</p>  
</body>
</html>

box-shadow属性

CSS3中CSS3 box-shadow属性适用于盒子阴影

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
 div
  {
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px blue;
  }
</style>
</head>
<body>
  <div></div>
</body>
</html>

给阴影添加一个模糊效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
 div
  {
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 15px grey;;
  }
</style>
</head>
<body>
  <div></div>
</body>
</html>

你也可以在::befor和::after两个伪元素中添加阴影效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#boxshadow {
    position: relative;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
}
/* Make the image fit the box */
#boxshadow img {
    width: 90%;
    border: 1px solid #8a4419;
    border-style: inset;
}
#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    width: 70%;
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}
</style>
</head>
<body>
<div id="boxshadow">
  <img src="https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg" alt="Norway" width="300" height="200">
</div>
</body>
</html>

text-overflow属性

text-overflow:是否使用一个省略标记(…)标示对象内文本的溢出 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
  .test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; height:50px; background:#ccc;}
  .test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; height:50px; background:#ccc;}
</style>
</head>
<body>
<div class="test_demo_clip">
  不显示省略标记,而是简单的裁切条
</div>
<br><br>
<div class="test_demo_ellipsis">
  当对象内文本溢出时显示省略标记
</div>
</body>
</html>

CSS3的换行word-wrap

如果某个单词太长,不适合在一个区域内,它扩展到外面:


CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
p.test
    {
    width:11em; 
    border:2px solid blue;
    word-wrap:break-word;
    }
</style>
</head>
<body>
  <p class="test">
    CSS3将完全向后兼容,所以没有必要修改的设计来让它们继续运作。
    网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性,
    这些会允许实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出现在的设计效果(比如说使用分栏)。
  </p>
</body>
</html>

CSS3 Word Break

CSS3 Word Breaking属性指定换行规则:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
  p.test1
{
width:9em; 
border:1px solid #000000;
word-break:keep-all;
}
  p.test2
{
width:9em; 
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1"> 为什么大罗如此让球迷念念不忘?我们喜爱一个球星或一支球队多少会有情愫寄托在内。</p>
<p class="test2"> 为什么大罗如此让球迷念念不忘?我们喜爱一个球星或一支球队多少会有情愫寄托在内。</p>
</body>
</html>


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> p{ text-align:center; margin:0; font-family: helvetica,arial,sans-serif; color:#999; font-size:80px; font-weight:bold; text-shadow:10px 10px #333; } </style> </head> <body> <p>Text Shadow</p> </body> </html>
提交重置代码
高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载