css3背景和边框


1、新增属性

background-clip

定义:background-clip     属性规定背景的绘制区域。

语法:background-clip      border-box   背景被裁剪到边框盒。

padding-box  背景被裁剪到内边距框

content-box  背景被裁剪到内容框

background-origin

定义:background-origin    属性规定 background-position 属性相对于什么位置来定位。

语法: background-origin:   border-box      背景图像相对于边框盒来定位

padding-box     背景图像相对于内边距框来定位。

content-box    背景图像相对于内容框来定位

background-size

定义:规定背景图像的尺寸

语法:background-size:    length  设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值 ,则第二个值会被设置为 "auto"。

percentage  以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

cover  把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain  把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

2、概述:css3中规定了一个元素可以显示多个背景图像,这就是一个新的规定。

3、圆角和边框border-radius

border-radius

定义:属性是一个简写属性,用于设置四个border-*-radius 属性该属性允许您为元素添加圆角边框!

语法:border-radius: px|% px|%;

4、使用图像边框border-image

border-image

定义:border-image 属性是一个简写属性,用于设置以下属性

border-image-source       用在边框的图片的路径。

border-image-slice        图片边框向内偏移

border-image-width        图片边框的宽度。

border-image-outset       边框图像区域超出边框的量。

border-image-repeat       图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

{���{���򣦘

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

推荐阅读更多精彩内容

  • 与背景相关的新增属性 background-clip:指定背景的显示范围 background-origin:指定...
    oWSQo阅读 557评论 0 0
  • CSS边框属性 元素的边框就是围绕元素内容和内边距的一条或多条线。 元素的边框属性: border 简写属性,用...
    Zd_silent阅读 1,007评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,656评论 0 7
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    aliensq阅读 2,056评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,803评论 0 2