关闭

CSS3 之background-clip 属性

标签: css3前端
577人阅读 评论(0) 收藏 举报
分类:

clip中文为裁剪的意思,为了明显展示三个属性padding-box,border-box,content-box的区别,下面的代码中加上20px的内边距。
1、border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉;

2、padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉;

3、context-box:背景从content区域向外裁剪,超过context区域的背景将被裁剪掉;

1.padding-box

div{
            width: 150px;
            height: 150px;
            border: 20px solid rgba(0,0,0,0.2);
            background-clip: padding-box;
            padding: 20px;
            background-image: url("../img/fengjing.jpg");
        }

效果如下:
这里写图片描述

2.border-box

div{
            width: 150px;
            height: 150px;
            border: 20px solid rgba(0,0,0,0.2);
            background-clip: border-box;
            padding: 20px;
            background-image: url("../img/fengjing.jpg");
        }

效果如下:
这里写图片描述
3.content-box

div{
            width: 150px;
            height: 150px;
            border: 20px solid rgba(0,0,0,0.2);
            background-clip: content-box;
            padding: 20px;
            background-image: url("../img/fengjing.jpg");
        }

效果如下
这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3321次
    • 积分:129
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类