css3常见属性

文本

text-shadow：设置文本的阴影

使用语法如下，

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

前两项是必须写的，后两项可以省略。

凹凸文字

我们可以通过设置文字阴影，制造凹凸文字的效果

凹凸文字.png

背景缩放

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
            background-size: 300px 100px;
            /* background-size: contain; */
            /* background-size: cover; */

多背景

以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。

1. 一个元素可以设置多重背景图像。
2. 每组属性间使用逗号分隔。
3. 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
4. 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

背景渐变

语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；

css3盒子模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

边框

边框圆角：border-radius

边框的每个圆角，本质上是一个圆，圆有水平半径和垂直半径：如果二者相等，就是圆；如果二者不等， 就是椭圆。

属性用法如下

    border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 

 　  border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

边框阴影：box-shadow

box-shadow是向盒子添加阴影。支持添加一个或者多个。
语法：

　　 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 

参数解释：

1. 水平偏移：正值向右 负值向左。
2. 垂直偏移：正值向下 负值向上。
3. 模糊程度：不能为负值。