border-radius、box-shadow及box-siz

H5、C3新增了好多好玩的玩意儿，这样就能做出很多新鲜的东西啦。。。

border-radius ： 圆角属性

border-radius 属性是一个简写属性，用于设置四个 border-radius 属性
border-radius:top-left top-right bottom-right bottom-left;
（属性值可写数字或百分比）
举例：border-radius：2px;
等价于
border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;

.box{
width:100px;
height:100px;
background: red;
border-radius:50%;
}

效果图如下：

Paste_Image.png

box-shadow ： 阴影属性

box-shadow: 水平阴影（可负 ， 必填） 垂直阴影（可负 ， 必填） 模糊距离（可选 ） 阴影尺寸（可选 ） 阴影颜色（可选 ） 改为内阴影（可选 ）;
别问为什么写汉字~~~~~

.box{
width: 100px;
height: 100px;
background: red;
box-shadow: 0 0 25px 0px #000;
}

效果图如下：

Paste_Image.png

box-sizing属性

属性值两个：（不做例子解释了）
1、content-box:元素的高度与宽度不包括padding、border;
2、border-box:元素的高度与宽度包括padding、border 即不把边框计算在内;