css3边框与背景

标签：宽度   扩展   背景   css   填充   长度   属性   number   nbsp   

一、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; }

css3边框与背景

标签：宽度   扩展   背景   css   填充   长度   属性   number   nbsp   

原文地址：https://www.cnblogs.com/tianya-guoke/p/10182630.html