一.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:外轮廓扩展