《HTML5移动开发指南》——笔记6（CSS3新特性）

来源：互联网发布：淘宝换ipad电池编辑：程序博客网时间：2024/05/29 09:05

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 */

2.阴影

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>

0 0