背景+图像边框的设置526.PPT

背景与边框 背景图片显示 background-attachment属性用来设定背景图片是否随文档一起滚动。该属性包含两个属性值：scroll和fixed，并适用于所有元素。 实例：11.5.html 背景图片大小 CSS3中，新增了一个background-size属性，用来控制背景图片大小，从而降低网页设计的开发成本。background-size语法格式为background-size ：[ length | percentage | auto ]{1,2} | cover | contain。 实例：11.11.html 背景显示区域 在CSS3中，新增了一个background-origin属性，用来完成背景图片的定位。默认情况下，background-position属性总是以元素左上角原点作为背景图像定位，适应background-origin属性可以改变这种定位方式。background-origin ： border | padding | content。 实例：11.8.html 背景图像裁剪区域 在CSS3中，新增了一个background-clip属性，用来定义背景图片的裁剪区域。通俗的说，background-clip属性用来判断背景十分包含边框区域，而background-orgin属性用来决定background-position属性定位的参考位置。background-clip语法格式为background-clip ： border-box | padding-box | content-box | no-clip。 实例：11.9.html 背景复合属性 在CSS3中，background属性依然保持了一起的用法，即综合了以上所有与背景有关的属性（即以back-ground-开头的属性），可以一次性地设定背景样式。格式如下：background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position][background-size] [background-clip] [background-origin]。 圆角边框 在CSS3中，可以使用border-radius属性定义边框的圆角效果，从而大大降低了圆角开发成本。border-radius的语法格式为border-radius ： none | length{1,4} [ / length{1,4} ]。 实例：11.15.html 指定两个圆角半径 可以使用border-radius属性设置了一个参数用来绘制圆角，同样还可以使用两个参数绘制圆角。border-radius属性可以包含两个参数值：第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径，两个参数通过斜线（“/”）隔开。如果仅含一个参数值，则第二个值与第一个值相同，表示这个叫就是一个1/4的圆。如果参数值中包含0，则这个值就是矩形，不会显示为圆角。 实例：11.16.html 绘制四个不同圆角边框 第一种方法就是利用border-radius属性，为其赋一组值。当为border-radius属性赋一组值，将遵循CSS规则，可以包含2到4个属性值，此时无法使用斜杠定义圆角水平和垂直半径。 实例：11.111.html 可以使用等border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius和border-top-left-radius属性单独为相应的边框设置圆角。 实例：11.18.html 绘制边框种类 border-radius属性可以根据不同半径值，来绘制不同的圆角边框。同样也可以利用border-radius来定义边框内部的圆角，即内圆角。需要注意的是，外部圆角边框的半径称为外半径，内边半径等于外边半径减去对应边的宽度，即将边框内部的圆的半径称为内半径。 实例：11.19.html 图像边框属性 border-image是CSS3新增核心属性之一，也是一个非常实用的属性，它可以设置border边框的背景图。但可惜的是，目前浏览器对其支持不是太好。border-image语法格式为border-image ： none | image [ number | percentage]{1,4} [ / border-width{1,4} ]? [ stretch | repeat | round ]{0,2}。 为了方便设计师更灵活的定义边框的背景图像，CSS3允许将border-image属性派生了众多的子属性，一方面CSS3