CSS3 background-clip属性

这个属性官方文档语法：

实例代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 10px;}.a{float: left;height: 200px;width: 200px;border: 10px dashed royalblue;padding: 20px;background-color: #F08080;/*background: url(img/HBuilder.png) no-repeat;*/background-clip:padding-box;}.b{float: left;height: 200px;width: 200px;border: 10px dashed royalblue;padding: 20px;background-color: #F08080;/*background: url(img/HBuilder.png) no-repeat;*/background-clip:border-box;}.c{float: left;height: 200px;width: 200px;border: 10px dashed royalblue;padding: 20px;background-color: #F08080;/*background: url(img/HBuilder.png) no-repeat;*/background-clip:content-box;}.d{float: left;height: 200px;width: 200px;border: 10px dashed royalblue;padding: 20px;background-color: #F08080;/*background: url(img/HBuilder.png) no-repeat;*/         }    </style></head><body><div class="a">padding</div><div class="b">border</div><div class="c">content</div><div class="d">默认=border</div></body>
</html>

效果如下：

CSS3 background-clip属性相关推荐

css3中clip属性
clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. ...
图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
Background 全属性实例图解（10种全）(一)
Background 全属性实例图解(10种全)(一) 本文目录: 一.background属性: (1).属性描述 (2).background属性使用示例 (3).background动画属性 ( ...
将CSS CLIP属性应用在：扩展覆盖效果
日期:2013-3-18 来源:GBin1.com 在线演示我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加 ...
半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
background 背景属性详解
background 背景属性我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
html5火焰字体效果,CSS3文字特效属性text-shadow如何实现火焰文字的效果
CSS3文字特效属性text-shadow如何实现火焰文字的效果发布时间:2020-07-14 09:15:52 来源:亿速云阅读:177 作者:Leah 本篇文章给大家分享的是有关CSS3文字特 ...
【转载】CSS3之Clip（裁剪）拓展阅读
Clip属性是大家经常会误解的一个属性,这篇文章帮助大家充分的了解和学习clip属性,用这个属性制作出更好的效果. 我可以确定Clip属性有很多同学并不知道,因为这个属性使用率非常的底,我初次接触是在 ...
巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
box-sizing是CSS3的box属性
box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么C ...

CSS3 background-clip属性

CSS3 background-clip属性相关推荐

最新文章

热门文章