HTML5+CSS3

属性选择器

• 完全匹配属性选择器->符号（=)

<div id="artcle"></div>
        <style type="text/css">
            [id=artcle]{
                color:red;
            }
        </style>

• 包含匹配选择器->符号（*=)

//[attribute*=value]其中attribute指的是属性名，value指的是属性值，包含匹配采用*=
<div id="article">包含匹配选择</div>
        <div id="subarticle">匹配选择器</div>
        <div id="article1">配选择器</div>
        <style type="text/css">

            [id*=article]{
                color:red;
            }

• 首字符匹配选择器->符号（^=)

<div id="article">包含匹配选择</div>
        <div id="subarticle">匹配选择器</div>
        <div id="article1">配选择器</div>
        <style type="text/css">

            [id^=article]{
                color:red;
            }
        </style>

• 尾字符匹配->符号（$=)

<div id="article">包含匹配选择</div>
        <div id="subarticle">匹配选择器</div>
        <div id="article1">配选择器</div>
        <style type="text/css">

            [id$=article]{
                color:red;
            }
        </style>

伪类选择器

CSS3增加的伪类选择器
first-line伪元素选择器
first-letter伪元素选择器
root选择器
not选择器
empty选择器
target选择器

---

阴影
box-shadow
语法格式：box-shadow: ||color;
第一个 是阴影水平偏移值；第二个 是阴影垂直偏移值；第三个 是阴影模糊值。水平偏移垂直偏移值都可以取正负值

    <div>   
    </div>  
        <style type="text/css">
            div{
                /*其他浏览器*/
                box-shadow:3px 4px 2px #000;
                /*webkit浏览器*/
                -webkit-box-shadow:3px 4px 2px #000;
                /*Firedfox浏览器*/
                -moz-box-shadow:3px 4px 2px #000;
                padding:5px 4px;
            }
        </style>

text-shadow和上面的用户几乎一致的

背景

• background-size设置背景图片的大小
• background-clip确定背景剪裁区域

background-clip:border-box|padding-box|content-box|no-clip
其中border-box是从border区域向外裁剪背景；padding-box是从padding区域向外裁剪背景;是从内容容区域向外裁剪背景;|no-clip是从border区域向外裁剪背景

• background-origin

是指定background-position属性的参考坐标的起始位置.有三种值可以选择
border值指定从边框的左上角坐标开始
content是指从内容区域的左上角坐标开始;
padding是指定padding区域开始

• background

支持多重背景图片
背景渐变
-webkit-gradient(<type>,<port>[,<radius>?,<point>[,<radius>]?[,<stop>]*)
例如：
background:-webkit-gradient(linear,0,0,0 100%，from(#fff),to(#000));
上述代码的意思是定义一个渐变背景颜色，该渐变背景颜色是线性渐变并且是由白色向黑色渐变的，前两个0表示渐变开始X,Y坐标的位置;0，100%表示渐变结束X和Y坐标的位置

圆角边框