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