CSS3(边框和圆角)

1.CSS3圆角

语法:
border-radius: 数值或%;

 	border-radius:5px;

多值
border-radius:左上角,右上角,右下角,左下角;(4值)
border-radius:左上角,右上角和左下角,右下角;(3值)
border-radius:左上角和右下角,左上角和右下角;(2值)

单角定义
border-top-left-radius:左上角;
border-top-right-radius:右上角;
border-bottom-left-radius:左下角;
border-bottom-right-radius:右下角;

2.CSS3盒阴影

语法:
box-shadow:水平偏移量,垂直偏移量,模糊值,扩展值,颜色,设置外还
内阴影。

 	box-shadow:5px 5px 5px 5px #f00  inset;

前面四个值是数值,第五个是颜色,第六个不设置是外阴影,设置inset是内阴影。

3.CSS3边界图片

语法
border-image-source:url(); 设置图片地址 url()\none
border-image-slice: 图像边界向内偏移多少 数值 \%\fill(会获九点剪切法中间部分)
border-image-width: 图片边框的宽度 数值\%
border-image-outset: 用于指定在边框的外部绘制border-image-area的量 数值
border-image-repeat: 图片边界知否重复,拉伸或铺满 stretch(拉伸,默认),repeat(重复),round(铺满),initia(读取默认值),inherit(继承)

简写:border-image:source slice width outset repeat;

猜你喜欢

转载自blog.csdn.net/qq_36519236/article/details/89310520