css3的background-clip 背景

原创 2013年12月02日 18:11:40
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.c-box{
    width:100px;
    height:100px;
    padding:20px;
    background-color:#0FF;
    background-clip: content-box;
    border:2px solid #92b901;
}
.p-box{
    width:100px;
    height:100px;
    padding:10px;
    background-color:#0F0;
    background-clip: padding-box;
    border:10px dashed #92b901;
}
.b-box{
    width:100px;
    height:100px;
    padding:10px;
    background-color:#FF0;
    background-clip: border-box;
    border:5px dashed #92b901;
}
</style>
<title>无标题文档</title>

</head>

<body>

<div class="c-box">
     content-box 的效果
</div>
<br />
<div class="p-box">
     padding-box 的效果
</div>
<br />
<div class="b-box">
    border-box 的效果
</div>
</body>
</html>


浏览器支持

IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。

注释:Internet Explorer 8 以及更早的版本不支持 background-clip 属性。

border-box       背景被裁剪到边框盒。

padding-box    背景被裁剪到内边距框。

content-box     背景被裁剪到内容框。

效果图:


版权声明:原创文章,请标明出处~~~

相关文章推荐

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

弹出框的html代码如下: div class="search-popup-window advise" id="lightbox">   img src="style/image...

css3之background-clip

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

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

css3属性中background-clip与background-origin的用法释疑 困惑在哪里? background-clip 与 background-origin是css3中引入...

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

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

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

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

CSS3 background-origin,background-clip的比较

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

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

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

css3新特性之border,background和背景渐变

css3最新属性 ...

css3的一个控制背景的属性,background-size可以缩放大小啦

ackground-size需要两个值,它的类型可以是像素(px)、百分比(%)或是auto,还可以是cover和contain。第一个值为背景图的width,另外一个值用于指定背景图上的height...

css3实现一个div设置多张背景图片及background-image属性

引子 以前做网页布局的时候,一个div只能设置一张背景图片,设置多个背景的话,要用多个div嵌套才能实现,这样兼容性比较好。若您的网站要求兼容浏览器低版本,建议用这种方法。css3的出现,解决了...
  • twoto3_
  • twoto3_
  • 2016年09月20日 14:12
  • 1343
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的background-clip 背景
举报原因:
原因补充:

(最多只允许输入30个字)