CSS3技术最适合在移动Web开发中使用的特性:
- 增强的选择器
- 阴影
- 强大的背景设置
- 圆角边框
1.选择器
1.1属性选择器(分为四种类型)
- 完全匹配属性选择器
<div id="article"></div>
<style>
[id=article] {
color:#000;
}
</style><strong>
</strong>
- 包含匹配选择器
语法:[attribute*=value] attribute是属性名,value是属性的值
<div id="article">1</div>
<div id="subarticle">2</div>
<div id="article1">3</div>
<style>
[id*=article] {
color:red;
}
</style>
- 首字符匹配选择器
<div id="article">1</div>
<div id="subarticle">2</div>
<div id="article1">3</div>
<style>
[id^=article] {
color:red;
}
</style>
- 尾字符匹配选择器
<div id="article">1</div>
<div id="subarticle">2</div>
<div id="article1">3</div>
<style>
[id$=article] {
color:red;
}
</style>
1.2伪类选择器
- first-line伪类选择器
- first-letter伪类选择器
- root选择器
- not选择器
- empty选择器
- target选择器
before和after,一般可以用来清除浮动,给父元素设置。
.parent:before {
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .parent{zoom:1;} /* IE6 */
*+html .parent{zoom:1;} /* IE7 */
box-shadow:3px 4px 2px #000;
-webkit-box-shadow:3px 4px 2px #000;
-moz-box-shadow:3px 4px 2px #000;
/*text-shadow基本得到大多数游览器支持*/
text-shadow: 5px -10px 5px red;
3.背景
4.圆角边框
<span style="font-size:14px;">border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;</span>