前段成长之路——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>