border-radius:给边框设置圆角,可以指定top-left,top-right,bottom-left,bottom-right,也可以复合着写,规则如下:border-radius: p1 p2 p3 p4
/* 左上->右上->右下->左下(顺时针)*/
border-radius: p1 p2 p3
/* 左上->右上、左下->右下 */
border-radius: p1 p2
/* 左上、右下->右上、左下 */
border-radius: p1
/* 相同 */
box-shadow:设置一个或多个下拉阴影,可以选择偏移量、模糊距离等,语法如下:box-shadow: 0px 2px 10px 1px #ddd inset
/*
1. h-shadow,水平阴影的位置(必需)
2. v-shadow,垂直阴影的位置(必需)
3. blur,模糊距离
4. spread,阴影大小
5. color,阴影颜色
6. inset,转换成内侧阴影
*/
border-image-source:通过url()指定图像作为边框border-image-slice:指定图像的边界向内偏移,将图像分成九宫格,中间部分将被丢弃(写上fill可以保留中间部分),剩下的部分就是边框的组成。语法如下:border-image-slice: p1 p2 p3 p4
/* 顶部偏移->右边偏移->底部偏移->左边偏移 */
border-image-slice: p1 p2 p3
/* 顶部偏移->左、右边偏移->底部偏移 */
border-image-slice: p1 p2
/* 顶、底偏移->左、右偏移 */
border-image-slice: p1
/* 相同 */
border-image-width:在图像切片的基础上,规定了边框图像的宽度,取值若是纯数字,则代表相应的border-width的倍数;效果是:相应的背景图像会根据这个属性值进行缩放,然后再重复/平铺/拉伸border-image-repeat:规定如何延展和铺排图像的边缘,和中间部分(如果保留了的话)
stretch,拉伸填充(默认)repeat,平铺填充round:平铺,但适当缩放,保证图像的平铺个数完整border-image-outset:把边框图像向外延伸border-image:速记属性border-image: url(xxx) 20 round
/* 这里的20是边界的偏移量 */
border-image: url(xxx) 20 / 3em / round
/* 加上3em作为图像宽度,需要用 / 隔开 */
详细可参考:CSS3 border-image 彻底明白,我的神,segmentfault
background-image:可以指定多张图像,url(a),url(b),a会叠在b之上background-size:指定背景图像大小,100% 100%可以实现填充background-origin:指定背景图像的位置区域,可选content-box,padding-box或border-box
background-clip:指定背景图像的裁剪区域,可选content-box,padding-box或border-box,只有落到裁剪区域内才会显示;另外,它可以同时控制背景图像和背景色的显示范围,而background-origin只能控制图像
详细可参考:css中backgrou-clip属性的作用,蓝色眼泪1,博客园
原文:https://www.cnblogs.com/zzzt20/p/12421641.html