CSS3的resize、渐变、多列设置

CSS3的用户界面、颜色、透明

1、CSS用户界面

1、在css3中，增加了一些新的用户界面特性来调整元素尺寸、框尺寸和外边框，紧跟在-webkit，-moz-，      或-ms-的后面作为支持前缀属性的第一个浏览器版本
2、resize属性指定一个元素是否可以由用户调整大小的。both表示可以调整宽高。配合overflow-auto
   overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。
   both表示可以调整宽高，horizontal调整宽度，vertical调整元素高度
3、box-sizing属性默许以确切的方式适应某个区域的具体内容
4、outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
5、 outline-offset /* 设置外边框 */
            outline: 2px solid red;
            /* 设置外边框的偏移量 */
            outline-offset: 1px;

2、css3多列

1、通过css3可以通过创建多个列来对文本进行布局，多列属性
   1）创建多列
    column-count：分成多列，设置兼容的前缀
      -moz-column-count: 3;
      -webkit-column-count: 2;
   2）指定列之间的差距
    column-gap：设置列之间的距离规则。距离列之间有多少像素
     -webkit-column-gap: 140px;
   3）列规则
     column-rule：设置列之间的线条。线条宽度，线条，颜色
      -webkit-column-rule: 3px solid red;

3、css3透明度

1、opacity：设置元素的不透明级别
2、rgba元素的规定：rgba（red，green，blue，alpha）
   alpha参数指的就是透明度，0完全透明，1完全不透明
3、background-color: red;
            /* 设置透明，缺点：文字也会跟着透明 */
            opacity: 0.3;
4、 background-color: rgba(255, 0, 0, 0.3);文字不会透明
5、16进制颜色表示法：以#开头，由0-9-a-f组成
                  顺序：#rrggbb
                  代表红绿蓝
                  三原色
6、

4、渐变

1、语法：
             /* 背景渐变 */
            /* background: linear-gradient(起始方向，颜色1，颜色2); */
            background: linear-gradient( gold, red