CSS基础知识介绍——CSS 3 新增的属性

1.text-shadow属性

作用：为页面上的文字添加阴影效果

语法如下：
text-shadow：h-shadow v-shadow blur  color
h-shadow：指定水平方向上阴影的位置，可以为负值
v-shadow：指定垂直方向上阴影的位置，可以为负值
blur：指定阴影的模糊半径
color：指定阴影的颜色

example：

p{
		text-align: center;
		padding: 20px;
		margin-left: 0;
		font-family: helvetica,arial,sans-serif;
		color: #000;
		background: #000;
		font-size: 70px;
		text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
}
.......
<p>强大的CSS 3</p>

 

---

 2. text-overflow属性

作用：决定当内容超过宽度时的显示方式

语法如下：
text-overflow：clip | ellipsis | ellipsis-word
clip属性值表示不显示省略标记，而是简单的裁决
ellipsis属性值表示当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个字符
ellipsis-word表示当对象内文本溢出时显示省略标记，省略标记插入的位置是最后一个词(word)

example：

.one p{
		margin: 10px;
		line-height: 15px;
		color: #006699;
		font-weight: 800;
		font-family: 宋体;
		text-decoration: underline;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}
.....
<p>新闻列表</p>
<div class="one">
<p>.曝途观改款车海外测试谍照 换代途安更多消息曝光</p>
<p>.华泰元田配上汽1.8T发动机 全新奔驰CLS十月首发</p>
...........
</div>

 

---

3. word-wrap属性

用于确定当内容到达容器边界时的显示方式，可以是换行或断开

语法如下：
word-wrap：normal | break-word
normal属性值表示控制连续文本换行
break-word属性值表示内容将在边界内换行

example：

p{
		width: 200px;
		border: 1px solid;
		background-color: #FFDCCC;
		font-weight: bold;
		padding: 5px;
		word-wrap: break-word;}
.......
<p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
http://kehiugihgoheohfwehfhwohgwhoehiw.com</p>

---

4. content属性

用于为指定元素添加内容

语法如下：
content：normal | string | attr() | url() | counter()
normal是默认值
string用于插入文本内容 使用双引号括起来的字符串
attr（）用于插入元素的属性值
url（）用于插入一个外部资源
counter（）表示计数器，用于插入排序标识

example：

 

	h2:before{
		content: "美女列表";
		font-family: 黑体;
	}
	ol{
		list-style-type: none;
		counter-reset: sectioncounter;
	}
	ol li:before{
		content: "美女" conter(sectioncounter) " ";
		counter-increment: sectioncounter

	}
......
<h2></h2>
<ol>
<li><img src="2.jpg" width="128" height="96"></li>
<li><img src="3.jpg" width="128" height="96"></li>
</ol>