css3边框与背景

一、css3边框

1、border-image 边框

border-image: url(xxx.png) number

stretch 很好理解就是拉伸，有多长拉多长。

repeat (和4角上 同等大小图片进行平铺 当边框中间区域长度不是4角图片大小的整数倍时 会被切割)

铺满(round)(4角上的图片 进行拉伸平铺 不会被切割)（共三个参数） （注释：content宽度/border相应位置宽度 四舍五入张图片填充）

number 为截取指定图片四周的宽度作为border的背景填充部分(截取图可按border-width 大小伸缩), number为一个数字时是复合写法 最后一个属性为border-image的展示策略 eg:border-image: url('./border.png') 27 round;

2、border-radius    —    圆角

border-radius:20px; = border-radius:20px 20px 20px 20px;

is equivalent to:

border-top-left-radius:20px;

border-top-right-radius:20px;

border-bottom-right-radius:20px;

border-bottom-left-radius:20px;

border-radius:10px  （代表四个点的半径都是10px）

border-radius:10px 20px （代表左上右下半径为10px  右上左下半径为20px）

border-radius:10px 20px 30px（代表左上半径为10px  右上左下半径为20px 右下半径为30px）

border-radius:10px 20px 30px 40px（顺时针左上开始，四个角的值）

二、css3背景

3、box-shadow — 盒子阴影

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

eg: .box-shadow{ box-shadow:4px 2px 6px 7px #333333 inset; }

同一盒子，可以同时加多个阴影，阴影之间用“,”隔开

.box-shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }

4、背景图片起始位置background-origin

语法： background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

5、裁剪背景background-clip

语法： background-clip ： border-box | padding-box | content-box

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。

background-clip默认值为border-box。

6、背景图片尺寸background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明：

①auto：默认值，不改变背景图片的原始高度和宽度；

②<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

③<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

④cover：用一张图片铺满整个背景，如果比例不符，则截断图片 （按比例扩大缩小背景图片，宽和高的比不变，按照差值最大的边进行扩大缩小，超出部分截断）

⑤contain：尽量让背景内，存在一整张图片（按比例扩大缩小背景图片，宽和高的比不变，按照差值最小的边进行扩大缩小）

7、background  （红色为新增属性）

①background-image:url( "./img/a,jpg ); //设置元素背景图片

②background-reapeat: reapeat/no-reapeat; //设置背景图像的平铺方式  默认reapeat

③background-position:left top //设置元素的背景定位起点，默认值为left top

④background-size:auto; //设置背景图片的尺寸大小，默认值为auto

⑤background-attachment:scroll/fixed; //设置元素背景图片是否为固定，默认值为auto

⑥background-clip:border-box;控制元素的背景图像显示区域大小，默认值为border-box

⑦background-color:设置背景颜色

⑧background-origin:padding-box;控制元素的背景图像position的默认起始点，默认值为padding-box