首页 > Web开发 > 详细

CSS 属性整理(二)

时间:2020-03-05 18:09:44      阅读:68      评论:0      收藏:0      [点我收藏+]

CSS3的新边框属性

  • border-radius:给边框设置圆角,可以指定top-lefttop-rightbottom-leftbottom-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-boxpadding-boxborder-box

  • background-clip:指定背景图像的裁剪区域,可选content-boxpadding-boxborder-box,只有落到裁剪区域内才会显示;另外,它可以同时控制背景图像和背景色的显示范围,而background-origin只能控制图像
    详细可参考:css中backgrou-clip属性的作用,蓝色眼泪1,博客园

CSS 属性整理(二)

原文:https://www.cnblogs.com/zzzt20/p/12421641.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!