2016_3_22_查露补缺.md

border-radius

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：

1、border-radius: [ {1,4} ]; //这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等

2、border-radius:[ {1,4} ] [ {1,4} ] ; //这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值 3、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right

4、border-radius:[ {1,4} ] [ {1,4} ] [ {1,4} ] [ {1,4} ];//如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left

前面，我们主要看了border-radius的缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，具体看下面：

border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角

这里说一下，各角拆分出来取值方式：中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角。

Example:

box-shadow

用法
box-shadow: [inset] x y blur [spread] color
参数
inset：投影方式
inset：内投影, 不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径, 先扩展原有形状，再开始画阴影
color

.a {
  /* offset-x | offset-y | blur-radius | color */
  box-shadow:  10px 10px 5px #888;
}

.b {
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow:  10px 10px 5px 5px #888;
}

.c {
  /* offset-x | offset-y | color */
   box-shadow:  10px 10px #888;
}

.d {
  /* inset | offset-x | offset-y | color */
  box-shadow: inset 10px 10px #000;
}

.e {
  /*多重阴影*/
  box-shadow: 5px 5px 10px blue, 10px 10px 10px red, 15px 15px 10px #888;
}

Example

http://plnkr.co/edit/qAtWyZ7x6KQisFGO2Y68?p=preview

text-shadow

用法
text-shadow：x y blur color, …
参数
x		横向偏移
y		纵向偏移
blur		模糊距离
color		阴影颜色
文本阴影如果加很多层，会很卡很卡很卡

Example:

https://jsfiddle.net/hjzheng/Khhx7/

背景

多背景
逗号分开
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

背景尺寸
background-size:x y
background-size:100% 100%
Cover 放大
Contain 缩小

背景原点
background-origin ： border-box | padding-box | content-box 
border-box： 从border区域开始显示背景。 
padding-box： 从padding区域开始显示背景。 
content-box： 从content区域开始显示背景。

background-clip
border-box： 背景被裁剪到边框。 
padding-box： 背景被裁剪到内边距框。
content-box： 背景被裁剪到内容框。

http://www.w3school.com.cn/css3/css3_background.asp

Example:

https://jsfiddle.net/hjzheng/94GTz/6/

hjzheng/2016_3_22_查露补缺.md

border-radius

box-shadow

text-shadow

背景