<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

#example1 {

    border: 5px dotted black;

    padding:35px;

    background: #00FFFF;

}

#example2 {

    border: 10px dotted black;

    padding:35px;

    background: yellow;

    background-clip: padding-box;

}

#example3 {

    border: 10px dotted black;

    padding:35px;

    background: yellow;

    background-clip: content-box;

}

</style>

</head>

<body>

<p>没有背景剪裁 (border-box没有定义):</p>

<div id="example1">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>

<p>background-clip: padding-box:</p>

<div id="example2">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>

<p>background-clip: content-box:</p>

<div id="example3">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>

</body>

</html>

如图：

CSS background-clip 属性的更多相关文章

  1. CSS元素:clip属性作用说明

    clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,介绍的也很少.应用clip属性需要注意的两点: 一.clip属性必须和定位属性postion一起使用才能生效. 二.clip裁切的计算坐 ...

  2. 将CSS CLIP属性应用在：扩展覆盖效果

    我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面.点击其中一个元素将创建一个切断 ...

  3. CSS background 属性全家桶

    介绍我们都知道css的background属性是一个复合属性,可以简写成一行代码,也可以将每个属性分开来写. background 简写属性在一个声明中设置所有的背景属性.如:body{ backgr ...

  4. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  5. CSS background 属性

    CSS 参考手册 实例 如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试 ...

  6. CSS Clip属性

    Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”. .selector { c ...

  7. 理解CSS Clip属性及用法

    应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px  350px  170px  0); /* IE ...

  8. CSS background 属性 总结

    CSS background 属性总结

  9. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  10. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

随机推荐

  1. java 泛型基础问题汇总

    泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.这种参数类型可以用在类.接口和方法的创建中,分别称为泛型类.泛型接口.泛型方法. Java语言引 ...

  2. 老铁，这年头不会点Git真不行！！！

    版本控制 说到版本控制,脑海里总会浮现大学毕业是写毕业论文的场景,你电脑上的毕业论文一定出现过这番景象! 毕业论文_初稿.doc 毕业论文_修改1.doc 毕业论文_修改2.doc 毕业论文_修改3. ...

  3. COM学习（三）——COM的跨语言

    COM是基于二进制的组件模块,从设计之初就以支持所有语言作为它的一个目标,这篇文章主要探讨COM的跨语言部分. idl文件 一般COM接口的实现肯定是以某一具体语言来实现的,比如说使用VC++语言,这 ...

  4. python实现XSS过滤（BeautifulSoup和白名单处理）

    下面我做的莫名其妙的代码格式化是因为这个 --.-- 首先大致说一下XSS,就是在HTML里插入恶意的javascript代码,使得在该HTML加载时执行恶意代码,达到攻击的目的. 可能存在的地方呢, ...

  5. （3两个例子）从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练

    从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练 1综述http://www.cnblogs.com/jsxyhelu/p/7907241.html2环境架设http://www.cn ...

  6. 微信小程序——获取openid

    1.在微信小程序后台得到appid.AppSecret 2.在任意小程序界面的[onLoad]中取得code(建议将代码写在index.js中) 3.用取得code换取openid 如后台无法将ope ...

  7. 分享html5的一个拖拽手法

    就是这样的效果:拖拽之前 之后: 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. AJAX的写法

    AJAX可以说是前端开发必须要会的技术.AJAX是异步的javascript and xml.是他们技术的合称. 1.原生写ajax.很多小伙伴在会了jQuery后,将原生都忘记了,所以原生我还是要在 ...

  9. 【算法】赫夫曼树（Huffman）的构建和应用（编码、译码）

    参考资料 <算法(java)>                           — — Robert Sedgewick, Kevin Wayne <数据结构>       ...

  10. Oracle触发bug(cursor: mutex S)，造成数据库服务器CPU接近100%

    问题现象: 项目反馈系统反应非常缓慢,数据库服务器CPU接近100%! INSERT INTO GSPAudit1712(ID,TypeID,CategoryID,DateTime,UserID,Us ...