CSS3

一.css3背景与边框###

1、background-clip
定义：background-clip属性规定背景的绘制区域。
语法：background-clip: border-box|padding-box|content-box;
参数：border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
2、background-origin
定义：background-origin 属性规定 background-position属性相对于什么位置来定位。
语法： background-origin: padding-box|border-box|content-box;
参数：border-box 背景图像相对于边框盒来定位
padding-box 背景图像相对于内边距框来定位。
content-box 背景图像相对于内容框来定位
3、 background-size
定义：规定背景图像的尺寸
语法：background-size: length|percentage|cover|contain;
参数：length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值 ，则第二个值会被设置为 "auto"。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
4、background-break
定义： 指定内联元素的背景图像进行平铺时的循环方式
语法：background-break: continuous |bounding-box|each-box;
参数：continuous背景图像相对于内边距框来定位。
bounding-box 背景图像相对于边框盒来定位
each-box 背景图像相对于内容框来定位
5、在一个元素中显示多个背景图像
概述：css3中规定了一个元素可以显示多个背景图像，这就是一个新的规定。

python
      div{
          background:url("flower-red.png"),

                 url("flower-green.png"),

                               url("sky.png");
 
         background-repeat:no-repeat, repeat-x, no-repeat;
                    
         background-position:3% 98%,85%,center,center,top;
                      
         width:300px;
 
         padding:90px 0px;

}

6、圆角和边框border-radius
定义：属性是一个简写属性，用于设置四个 border-radius属性
语法：border-radius: px|% px|%;

7、使用图像边框border-image
定义：border-image属性是一个简写属性，用于设置以下属性
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满
(rounded)或拉伸(stretched)。

二.Column###

1.column列属性 :column-width column-count列宽 列数 (可分开写)
2.column-gap:设置并列间的间隔 单位是px
3.column-rule:设置并列间的边框及边框样式
4.column-span：规定关素应横跨几列
参数：
1：表示只能跨1列
all：跨所有列

三.resize###

规定可以有用户调整元素大小
参数：
none：默认用户无法调整元素的大小
both：用户可以调整元素的宽度和高度
horizontal:用户可以调整元素的宽度
vertical：用户可以调整元素的高度

四.overflow###

规定当元素溢出元素框时发生的事情
参数：
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
visible：默认，内容不会被修剪，会呈现在元素之外
hidden:内容会被修剪，并且其他内容是不可见得
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
inherit：从父元素继承overflow的值

五.外轮廓属性outline###

位于边框边缘的外围
参数：
outline-width：外轮廓宽度
outlin-style：外轮廓样式
outline-color：外轮廓颜色
outline-offset：外轮廓扩展