<!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. Git操作流程，基本命令演示

    任务列表: 有一个中央库Center,和三个工作站A,B,C. 初始化时,代码存放在中央库中,A,B,C三个工作站开始工作之前都要首先从中央库克隆一份代码到本地. 第一个任务:A和B合作修复一个缺陷, ...

  2. 细说MyEclipse调试

     在程序出现问题时,我们需要找到并解决掉这些恼人的Bug,才能使程序顺利的运行下去.但是,当代码很多,程序很大的时候,找起来就很麻烦. 所以,我们需要借助工具——Eclipse/MyEclipse中的 ...

  3. Bootstrap File Input的简单使用

    安装引入 使用前需要引入其css和js文件, 注意引入路径的问题 <link rel="stylesheet" href="/__PUB__/fileinput/c ...

  4. Head First设计模式之访问者模式

    一.定义 定义:表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作. 访问者模式适用于数据结构相对稳定的系统, 它把数据结构和作用于数据结构之上的操 ...

  5. TurnipBit之DIY无线遥控智能小车

    一.准备工作 TurnipBit 开发板 2块 TurnipBit 扩展板 1块 数据线 1条 智能小车器件 1套 电机驱动模块(L298N) 1个 在线可视化编程 点击进入   二.思路设计   2 ...

  6. 对比Tornado和Twisted两种异步Python框架

    做Python的人,一定知道两个性能优秀的异步网络框架:tornado,和twisted. 那么,这两个著名的框架,又有什么异同呢?tornado和twisted,我都用在几个游戏项目中,做过后端,觉 ...

  7. 代码审计之XiaoCms（后台任意文件上传至getshell,任意目录删除,会话固定漏洞）

    0x00 前言 这段时间就一直在搞代码审计了.针对自己的审计方法做一下总结,记录一下步骤. 审计没他,基础要牢,思路要清晰,姿势要多且正. 下面是自己审计的步骤,正在逐步调整,寻求效率最高. 0x01 ...

  8. 快速了解Hibernate的使用

    了解hibernate的使用 hibernate是作用于传统的mvc开发dao层的框架 在以往的开发中我们如何的编写dao的代码呢 1.原始的jdbc操作,在dao中到操作Connection/Sta ...

  9. Chris Richardson微服务翻译：重构单体服务为微服务

    Chris Richardson 微服务系列翻译全7篇链接: 微服务介绍 构建微服务之使用API网关 构建微服务之微服务架构的进程通讯 微服务架构中的服务发现 微服务之事件驱动的数据管理 微服务部署 ...

  10. 从Unity中的Attribute到AOP(一)

    首先来看一下微软官方对Attributes(C#)的定义: https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/conce ...