CSS3

1、边框（border）

div{

    border-radius； /*圆角*/

    box-shadow；/*盒阴影*/

    border-image； /*边界图片*/

}

2、圆角（border-shadow）

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值： 四个圆角值相同

3、背景（background）

background-image； /*图片背景*/

background-size； /*背景图片的尺寸大小*/

background-origin； /*背景图片的定位区域*/

background-clip； /*背景的绘制区域*/

4、渐变（gradients）

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

#grad {

          background-image: linear-gradient(#e66465, #9198e5)；/*从上到下*/

          background-image: linear-gradient(red, yellow, green)；/*使用多个颜色节点渐变*/

}

#grad {

          background-image: linear-gradient(to right, red , yellow)；/*从左到右*/

          background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)；/*使用多个颜色节点渐变*/

          background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))；/*左右透明渐变*/

          background-image: repeating-linear-gradient(red, yellow 10%, green 20%)；/*重复线性渐变*/

}

径向渐变（Radial Gradients）- 由它们的中心定义

#grad {

          background-image: radial-gradient(red, yellow, green)；/*分布均匀的渐变*/

          background-image: radial-gradient(red 5%, yellow 15%, green 60%)；/*分布不均匀的渐变*/

}

5、文本阴影

水平阴影，垂直阴影，模糊的距离，阴影的颜色

h1

{

    text-shadow: 5px 5px 5px #FF0000；/*标题阴影*/

}

div {

    box-shadow: 10px 10px 5px grey；/*盒子阴影*/

}

6、字体

font-family；/*字体名称*/

src；/*定义字体文件的 URL*/

font-style；/*字体的样式*/

fon-weight；/*字体的粗细*/

7、多列

column-count  属性指定了需要分割的列数

div {

      column-count: 3；/*文本分为3列*/

}

column-gap 属性指定了列与列间的间隙

div{

    column-gap:40px；/*列与列间隙40px*/

}

column-rule-width 两列的边框厚度

column-rule-style 列与列间的边框样式

column-rule-color 两列边框的颜色

div {

    column-rule: 1px solid lightblue；/*边框的厚度、样式及颜色*/

}

8、按钮

background-color；/*按钮颜色*/

font-size；/*按钮大小*/

opacity按钮透明度

cursor：not-allowed；/*禁用按钮*/

9、position

一个元素（静态的，相对的，绝对或固定）的定位方法的类型

h2{

    position:absolute；

}