css3的学习笔记1

一.   边框

　　1.  border-color

　　border-color是设置边框的颜色。包括border-top-color,border-left-color,border-right-color,border-bottom。但是这里有一个border-XXX-colors样式，可以为边框设置多个颜色。其中如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。但是这种样式目前只能用在ff中，因此因此需要-moz-。而且不能使用-moz-border-colors同时为四个方向的边框设置多个颜色，只能逐个进行设置。如下：

div{
    width: 100px;
    height: 100px;
    margin: 50px 0 0 50px;
    background: red;
    border-style:solid;
    border-width:5px;
    -moz-border-top-colors: #333 #555 #777 #999 #ddd;
    -moz-border-bottom-colors: #333 #555 #777 #999 #ddd;
    -moz-border-right-colors: #333 #555 #777 #999 #ddd;
    -moz-border-left-colors: #333 #555 #777 #999 #ddd;
}

　　效果如下：

　　

　　2.   border-image

　　对于border-image这个属性用来给边框添加背景图像。是border-image-source，border-image-slice，border-image-width，border-image-outset，border-image-repeat的简写。

　　语法：border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}（看不懂，略）

　　相关属性 ： border-image：border-top-image , border-right-image , border-bottom-image , border-left-image

　　　　　　border-corner-image：border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image。

　　兼容性：Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6

　　border-images-source:图片地址。例如：url(png.png)。如果为none，则表示不设置边框图像，将会设置border-style的值。

　　border-image-slice:图片切片。用来指定边框图像顶部、右侧、底部、左侧内偏移量。可以设置为数字或百分比。作用是把边框图像切成9个区域：4个角、4边区域和一个中间部位，若不设置fill，则中间部位将为透明。例如：border-image-slice: 27 27 27 27，表示边框偏移27，其原理图如下

　　border-image-width:设置边框图片的宽度。例如border-image-width:27 27 27 27;

　　border-image-repeat: 设置图片是否重复,包括重复（repeated)、铺满(rounded)或拉伸(stretched。例如border-image-repeat:repeat.

　　二.  background

　　1.   background-size

　　作用：设置背景图片的大小。

　　取值：<length> | <percentage> | auto ]{1,2} | cover | contain

　　例如:background-size: 100% 100%即可将背景扩展为容器的大小。

　　2.   Multiple backgrounds

　　作用：多重背景图象，可以把不同背景图象只放到一个块元素里。

　　取值：[background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

　　兼容性：webkit.

　　例如：background: url(img/multiple-backgrounds.png) left top no-repeat, url(img/multiple-backgrounds.png) -320px bottom no-repeat, url(img/multiple-backgrounds.png) -640px top repeat-y;

　　

　　三.   color

　　1.   hsl

　　作用：通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色，HSL即是代表色调，饱和度，亮度三个通道的颜色。

　　取值：<length> || <percentage> || <percentage>

　　兼容性：IE8+，moz,webkit,o

　　例如：background-color: hsl(240,100%,50%)。

　　2.   hsla

　　这个样式不过是在hsl的基础上添加了透明度（0~1）。

　　

　　四.   文本

　　1.   text-shadow

　　作用：设置文字的阴影效果

　　取值：h-shadow:水平阴影位置。v-shadow:垂直阴影位置。blur：模糊的距离。color：颜色。

　　兼容性：ie9+ moz webkit o

　　例如：text-shadow:0 0 3px #FF0000;

　　

　　2.   text-overflow

　　作用：当文本溢出的时候的处理

　　取值：ellipse:使用省略号代替；clip：裁剪溢出的部分。

　　兼容性：都支持。

　　三.   用户界面

　　1.   box-sizing

　　作用：盒模型的切换

　　取值：border-box(width=content);content-box(width=border+padding+content)

　　兼容性：IE7+ moz,o,webkit

　　2.   outline

　　作用：绘制轮廓外边框

　　取值：outline-color:外边框颜色；outline-width:外边框宽度；outline-style：样式；outline-offset: 外边框偏移量。

　　兼容性：IE不支持outline-offset。其余的所有浏览器都支持。