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指定背景绘制区域

background-clip属性指定背景绘制区域 index.html div { width:20%; height:100px; margin:15px; backgrou...
  • hlx20080808
  • hlx20080808
  • 2017年04月07日 16:33
  • 109

CSS3背景闪烁和图片缩放动画效果

CSS3感应鼠标的背景闪烁和图片缩放动态效果 /*标题背景*/ h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300p...
  • lmnotlm
  • lmnotlm
  • 2014年05月05日 14:44
  • 1797

css3多重背景详解

文章转载自:前端开发博客 (http://caibaojian.com/css3-multiple-background.html) CSS2.1中有5个background属性可以用来控制元素...
  • gouhuarong
  • gouhuarong
  • 2016年07月16日 21:16
  • 1240

CSS3中用linear-gradient绘制网格背景

利用CSS3的linear-gradient 画网格背景
  • Han_minxing
  • Han_minxing
  • 2016年08月12日 17:08
  • 302

CSS3打造磨砂玻璃的背景

简介这个效果是在看这书上看到的,感觉很不错; 实现原理也挺简单的;效果图及实现效果图代码实现 Document ...
  • bomess
  • bomess
  • 2016年01月05日 15:17
  • 5718

css3 设置背景定位

CSS3 background-origin 可以将图片定位于:padding  或者padding里头,甚至是边框。 所以他有三个值:content-box、padding-box 或 borde...
  • youmypig
  • youmypig
  • 2015年06月12日 10:47
  • 1207

使用CSS3滤镜开发模糊背景(毛玻璃)效果

功能说明: 在平时的开发中我们时常需要弹出某些对话框,同时希望用户能够忽略背景把注意力集中到弹框上,这时候从用户 体验的角度出发,我们可以选择将弹框背景模糊化,用以增强用户的实际体验效果。 实现...
  • xiaoguang44
  • xiaoguang44
  • 2017年03月06日 17:58
  • 1188

CSS3动画实现背景滚动

在上一个模仿微信打飞机的游戏中,在敌机掉落下来时,如果背景图片也可以一直无穷滚动的话,那么效果就会更好。 现在就是要利用CSS3来实现一张图片的无穷滚动。首先了解一下CSS3的动画属性: ①.an...
  • csdn_zsdf
  • csdn_zsdf
  • 2017年04月26日 16:28
  • 942

CSS3多重背景及背景图片裁剪、定位和尺寸

CSS3之前我们可以对背景添加一张图片 CSS3允许我们在一个元素上添加多个图片多重背景图片.demo { width: 600px; height: 200px; bord...
  • q1056843325
  • q1056843325
  • 2016年11月15日 22:57
  • 3688

CSS3字体示例,背景图,变形基点等。。。

指定自动换行的处理方法         #div1{             word-break:keep-all;             当word-break属性使用keep-all参数值时...
  • lamenw
  • lamenw
  • 2017年04月05日 16:30
  • 370
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的background-clip 背景
举报原因:
原因补充:

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