<!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. C语言学生管理系统（原版本）（自编）

    /*系统特色:(大牛勿笑) *颜色提示 *文字提示 *功能 */ #include <stdio.h> #include <stdlib.h> #include <mat ...

  2. 《UNP》学习之TCP状态转换

    CLOSED:TCP起始状态 LISTEN:绑定端口后进入listen状态,一般是服务端 SYN_SENT:发送SYN连接请求,主动打开连接的一方进入SYN_SENT SYN_RCVD:接收到SYN连 ...

  3. 如何把Excel中的单元格等对象保存成图片

    对于Excel中的很多对象,比如单元格(Cell),图形(shape),图表(chart)等等,有时需要将它们保存成一张图片.就像截图一样. 最近做一个Excel相关的项目,项目中遇到一个很变态的需求 ...

  4. opensuse安装pycurl失败记录

    早上在opensuse安装pycurl,一直出现如下错误: pepper@VM_56_243_suse:~/code/gitosis-autotest> pip install pycurl C ...

  5. golang 栈操作

    Monk's Love for Food   Our monk loves food. Hence,he took up position of a manager at Sagar,a restau ...

  6. g4e基础篇#3 Git安装与配置

    g4e 是 Git for Enterprise Developer的简写,这个系列文章会统一使用g4e作为标识,便于大家查看和搜索. 章节目录 前言 1. 基础篇: 为什么要使用版本控制系统 Git ...

  7. Error: Can't find Python executable, you can set the PYTHON env variable.

    该错误解决方案. NodeJS安装Npm包时出现错误: npm WARN prefer global node-gyp@3.4.0 should be installed with -g > s ...

  8. 常用Linux命令笔记

    任何脱离业务的架构都是耍流氓 只记录实际常用的Linux命令 常用Linux命令 查找安装路径: whereis nginx 查询nginx进程: ps aux|grep nginx 查看 CentO ...

  9. OLEDB数据源

    title: OLEDB数据源 date: 2018-01-12 21:42:37 tags: [OLEDB, 数据库编程, VC++, 数据库] categories: windows 数据库编程 ...

  10. VS如何设置类或函数前不显示引用的数量

    问题如下: 取消显示这个引用的步骤: 找到菜单栏: 工具 ---> 选项  ---> 文本编辑器 ---> 所有语言 ---> CodeLens 设置取消启用CodeLens, ...