<!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. 解决 axios 返回空对象的问题

    问题描述:

  2. 微信小程序开发之模板消息

    一.添加模板 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用,详见模板审核说明 页面的 <form/> 组件,属性r ...

  3. Linux 文件路径包含特殊字符的处理方式

    文件路径包含特殊字符的处理方式 1)只用转义符 \ 2)使用双引号 mv /home/".Sent Items"/ /home/".&XfJT0ZABkK5O9g ...

  4. 使用alembic进行数据库版本管理

    前言 随着项目业务需求的不断变更,数据库的表结构修改难以避免,此时就需要对数据库的修改加以记录和控制,便于项目的版本管理和随意的升级和降级. Alembic就可以很好的解决这个问题.Alembic是S ...

  5. CSS样式表学习

    ---恢复内容开始--- 今天学习的主要内容是样式表和选择器. 1.样式表的分类 1.内联式样式表 特点:能实现精确控制,但是范围太小.页面显示的优先级高于其他样式表 2.内嵌式样式表 特点:必须在h ...

  6. Android 中log 找到关键log

    SYS_ANDROID_EVENT_LOG1. aee_exp文件夹中有 db.fatal.00.SWT. 2. 准备工作: gat打开db.fatal.00.SWT.dbg文件,即会生成.DEC文件 ...

  7. bridged(桥接模式)、NAT(网络地址转换模式)和host-only(主机模式)-VMware下三种网络配置方式

    VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式).要想在网络管理和维护中合理应用它们,你就应该先了解一下这三种工作模式. 1 ...

  8. Android之Bmob移动后端云服务器

    源码下载:http://download.csdn.net/download/jjhahage/10034519 PS:一般情况下,我们在写android程序的时候,想要实现登录注册功能,可以选择自己 ...

  9. [转]"git rm" 和 "rm" 的区别

    用 git rm 来删除文件,同时还会将这个删除操作记录下来 直观的来讲,git rm 删除过的文件,执行 git commit -m "abc" 提交时, 会自动将删除该文件的操 ...

  10. [翻译]QT core wallet manual 狗狗币核心钱包使用教程

    译注:比特币没赶上可以玩狗狗币啊,水电厂包不起可以用CPU挖啊.为了顺应时代潮流,了解一下区(fa)块(heng)链(cai)和加密货币技术,准备从研究狗狗币开始.网上找了一圈没有看到很好的入门级教程 ...