CSS 属性整理（二）

CSS3的新边框属性

• 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

CSS3的新背景属性

• 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