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中规定了一个元素可以显示多个背景图像,这就是一个新的规定。

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)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS边框属性 元素的边框就是围绕元素内容和内边距的一条或多条线。 元素的边框属性: border 简写属性,用...
    Zd_silent阅读 1,005评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,656评论 0 7
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    aliensq阅读 2,056评论 0 2
  • background应该是CSS里使用频率颇高的属性,简单实用。但参数偏多,本篇就介绍一下background的各...
    张歆琳阅读 4,325评论 4 26
  • 明天和意外永远不知道谁会先到来,因此真正明白向死而生的含义,那我们就能活的精彩,真正做到追随自己内心的声音(读后感)
    胡钧阅读 200评论 0 0