关闭

CSS3 之background-clip 属性

标签: css3前端
839人阅读 评论(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网站的观点或立场

css3的background-clip来制作半透明边框

弹出框的html代码如下: div class="search-popup-window advise" id="lightbox">   img src="style/im...
  • OrchidCat
  • OrchidCat
  • 2013-03-14 14:32
  • 1479

CSS3 动画配合clip属性创建圆形进度条动画

这里先讲下clip这个css中很少用到的样式,在w3chool是这样描述的 clip 属性剪裁绝对定位元素。 当一幅图像的尺寸大于包含它的元素时会发生什么呢?”clip” 属性允许您规定一个元...
  • Toxic07
  • Toxic07
  • 2015-07-16 14:32
  • 1852

解决浏览器background-image属性不支持css3动画

最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题。在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上,就完...
  • yhb241
  • yhb241
  • 2016-05-24 12:20
  • 1848

css3属性中background-clip与background-origin的用法释疑

css3属性中background-clip与background-origin的用法释疑 困惑在哪里? background-clip 与 background-origin是css3中引入...
  • wanluobo
  • wanluobo
  • 2016-04-21 19:48
  • 122

css3属性中background-clip与background-origin的用法区别?

困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content...
  • C14210220635C
  • C14210220635C
  • 2017-06-14 18:24
  • 196

css3之background-clip

background-clip是css3中一个很有用,但容易被忽视的一个属性。 定义 background-clip 属性规定背景的绘制区域。讲得通俗一点,此属性规定背景是不能存在于border和...
  • shidaping
  • shidaping
  • 2015-12-08 18:53
  • 364

css3之background-origin和background-clip的区别与联系

background-origin(CSS3新属性) 规定 background-position 属性相对于什么位置来定位 有三个属性值: border-box(忽略border,即会覆...
  • cysear
  • cysear
  • 2015-12-09 17:22
  • 762

深入浅出CSS3:background-clip,background-origin和border-image教程

深入浅出CSS3:background-clip,background-origin和border-image教程
  • Max__Payne
  • Max__Payne
  • 2011-01-13 23:09
  • 1096

CSS3 background-origin,background-clip的比较

background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,都有border、padding、content三种。 background-orig...
  • cddcj
  • cddcj
  • 2016-12-07 14:43
  • 230

CSS3background中属性值介绍

background-size 语法: background-size: [ , ]* = [ | | auto ]{1,2} | cover | conta...
  • qq_36309066
  • qq_36309066
  • 2016-12-07 13:52
  • 101
    个人资料
    • 访问:5041次
    • 积分:146
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类