CSS样式表基础（四）

5、CSS3 文本阴影

text-shadow: 阴影向右偏移量，阴影向下偏移量，阴影模糊值，阴影颜色

<html>
<head>
<title>CSS</title>
<style>
div {
  text-align: center;
  color: #39f;
  font-size: 64pt;
  font-family: 隶书;
  text-shadow: 5px 5px 5px #666
}
p {
  color: red;
  text-align: center;
  background: #9cc;
  font-size: 72pt;
  font-family: 楷体_GB2312;
  text-shadow: 2px 1px 2px black,-2px -1px #ff9;
}
</style>
</head>
<body>

<--!<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。-->
<div>宜春学院</div>
<p>HTML5网页设计</p>
</body>
</html>

图片说明

<p>标签文本：“HTML5网页设计”：
“color: red”—————————字体颜色：红***r> “text-align: center”——————文本位置：居中
“background: #9cc”——————背景：蓝***r> “font-size: 72pt” ——————— 字体大小：72pt
“font-family: 楷体_GB2312”——字体
“text-shadow: 2px 1px 2px black,-2px -1px #ff9”————文字阴影

<div>标签文本：“宜春学院”
“text-align: center”——————文本位置：居中
color: #39f;—————————字体颜色：蓝***r> font-size: 64pt;————————字体大小：64pt
font-family: 隶书;———————字体：隶书
text-shadow: 5px 5px 5px #666——文字阴影

6、CSS3 自动换行

在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分，例如：

<html>
<head>
<style> 
p {
  width:11em; 
  border:1px solid #000000;
  word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>

图片说明
可以控制div盒子的宽度width，然后设word-wrap 属性为自动换行，就会根据宽度自动断词并进行换行。