CSS3 文字效果
在CSS3中，增加了豐富的文字修飾效果，讓網頁更美觀舒服。以下列出了常用的CSS3文字屬性：
CSS3文字屬性
屬性
############################################################ #######text-shadow 文字陰影 #########text-overflow 文字溢位處理 #########word-wrap 長字或URL強制換行符號或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
如果某個單字太長，不適合在一個區域內，它擴展到外面：在
<!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>
