前段成长之路——CSS3基础（一）边框，颜色，字体，背景

<div class="test10">    <!--        background:[color]|[image]|[position]|[size]|[repeat]|[attachement]|[clip]|[origin]...                一行写的顺序是：color>image>attachement>position>size>origin>clip    --></div><style>    .test10{        width:300px;        height:140px;        border:1px solid red;        background:url("http://static.mukewang.com/static/img/logo_index.png")                    no-repeat top left/150px 70px content-box,                    url("http://static.mukewang.com/static/img/logo_index.png")                    no-repeat bottom right/75px 35px padding-box;    }</style><div class="test9">    <!--        设置背景图片的原始位置        background-origin:border-box|padding-box|content-box            border-box:边框            padding-box:内边距            content-box:内容区域        背景裁切：        background-clip:border-box|padding-box|content-box|no-clip            border-box:边框开始显示            paddig-box:内边框开始显示            content-box:内容区域开始显示        背景图片的大小        background-size:auto|<长度值>|<百分比>|cover|contain            cover:覆盖，背景图片等比缩放填满整个容器            contain:容纳，背景图片等比缩放至某一边紧贴容器边缘        图片滚动        background-attachment:fixed|scroll|local            fixed:背景图片相对于窗体固定            scroll:背景图片相对于元素固定，当元素内容滚动时背景图片不会跟着滚动            local:背景图片相对于元素内容固定，当元素随元素滚动时背景图片也会跟着滚动    --></div><style>    .test9{        width:500px;        height:300px;        border:20px solid #000;        margin:30px auto;        padding:30px;        background:#ccc url("http://static.mukewang.com/static/img/logo_index.png") no-repeat;        -webkit-background-origin: padding-box;        background-origin: padding-box;        background-clip: content-box;        -webkit-background-size: cover;        background-size:cover;    }</style><div class="test8">    <!--文本阴影        text-shadow:x-offset y-offset blur color;        x-offset:阴影的水平偏移量        y-offset:阴影的垂直偏移量        blur:阴影的模糊成都        color:阴影的颜色    -->    我有阴影</div><style>    .test8{        width:100px;        height:50px;        font-size:20px;        margin: 50px auto;        text-align: center;        text-shadow: 5px 5px 5px red;    }</style><div class="test7">    <!--        text-overflow:clip|ellipsis            clip:裁切            ellipsis:省略        需要和            white-space:nowrap;强制文本在一行显示            overflow:hidden;溢出内容为隐藏    -->    我是省略号。。。。。。</div><style>    .test7{        width:100px;        line-height: 1em;        height: 1em;        margin:50px auto;        white-space:nowrap;        overflow: hidden;        -ms-text-overflow: ellipsis;        text-overflow: ellipsis;    }</style><div class="test6">    <!--渐变色彩        linear-gradient(to bottom,#fff,#999)        Gradient：线性渐变：linear,径向渐变：radial        to bottom : 从上到下。180deg 角度 或 英文        #fff:起点颜色        #999:终点颜色    --></div><style>    .test6{        width:400px;        height:200px;        margin:50px auto;        background-image:linear-gradient(to bottom right,blue,red);    }</style><div class="test5">    <!--边框图片：border-image:url(xx.jpg):图片路径                              70 70 70 70:切割图片的宽度，顺时针规律                              repeat:图片的延伸方式。round(平铺)，repeat(重复)，stretch(拉伸)     --></div><style>    .test5{        margin:50px auto;        height:200px;        width:200px;        border:100px solid #ccc;        -webkit-border-image: url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 100 repeat;        -moz-border-image: url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 100 repeat;        -o-border-image: url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 100 repeat;        border-image: url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 100 repeat;    }</style><div class="test4">    <!--        投影        box-shadow：x轴偏移量，Y轴偏移量 [阴影模糊半径] [阴影扩展半径]                    [阴影颜色] [投影方式]    --></div><style>    .test4{        width:100px;        height:100px;        margin:50px auto;        background:orange;        box-shadow: 4px 2px 6px red inset;/*设置为inset时为内部阴影*/    }</style><div class="test3">    <!--圆角边框--></div><style>    .test3{        height:50px;        width:50px;        background: orange;        margin:20px auto;        border-radius:50px 50px 0 0;/*左上角，右上角，右下角，左下角*/    }</style><div class="test2">    <p>“:root”选择器等同于html</p>    <p>简单点说:</p>        :root{background:orange}<br>        html {background:orange;}</div><div class="test1">    <a href="xxx.pdf">我连接的是PDF文件</a>    <a href="#" class="icon">我类名是icon</a>    <a href="#" title="我的title是more">我的title是more</a>    <style>        a[class^="ico"]{            background:green;            color:#fff;        }        a[href$="pdf"]{            background:orange;            color:#fff;        }        a[title*="more"]{            background:blue;            color:#fff;        }    </style></div>