CSS background-clip 属性
<!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 属性的更多相关文章
- CSS元素:clip属性作用说明
clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,介绍的也很少.应用clip属性需要注意的两点: 一.clip属性必须和定位属性postion一起使用才能生效. 二.clip裁切的计算坐 ...
- 将CSS CLIP属性应用在：扩展覆盖效果
我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面.点击其中一个元素将创建一个切断 ...
- CSS background 属性全家桶
介绍我们都知道css的background属性是一个复合属性,可以简写成一行代码,也可以将每个属性分开来写. background 简写属性在一个声明中设置所有的背景属性.如:body{ backgr ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- CSS background 属性
CSS 参考手册 实例 如何在一个声明中设置所有背景属性: body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 亲自试 ...
- CSS Clip属性
Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”. .selector { c ...
- 理解CSS Clip属性及用法
应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px 350px 170px 0); /* IE ...
- CSS background 属性 总结
CSS background 属性总结
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- CSS探案之 background背景属性剖析
首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...
随机推荐
- Vue 子组件无法使用 $emit 向父组件传参
问题描述:
- Javascript流程控制
Javascript流程控制 1.条件语句 (1)if(exp)执行一句代码 (2)if(exp){执行代码段;} (3)if(exp){exp为true执行代码段}else{exp为false执行的 ...
- Head First设计模式之装饰者模式
一.定义 装饰者模式,英文叫Decorator Pattern,在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 动态将职责附加到 ...
- TPYBoard—MicroPython开发板免费试用！你最想抱走哪款？
TPYBoard开发板自上市开售以来,受到了广大硬件及MicroPython爱好者的一致好评,许多人提出想试用开发板的申请.为此,TPYBoard特推出多款开发板免费试用活动,感兴趣的朋友抓紧申请吧! ...
- 机器学习小记——KNN（K近邻） ^_^ （一）
为了让绝大多数人都可以看懂,所以我就用简单的话语来讲解机器学习每一个算法 第一次写ML的博文,所以可能会有些地方出错,欢迎各位大佬提出意见或错误 祝大家开心进步每一天- 博文代码全部为python 简 ...
- 我的Python学习笔记（二）：浅拷贝和深拷贝
在Python中,对象赋值,拷贝(浅拷贝和深拷贝)之间是有差异的,我们通过下列代码来介绍其区别 一.对象赋值 对象赋值不会复制对象,它只会复制一个对象引用,不会开辟新的内存空间 如下例所示,将test ...
- 10个优秀个android项目，精选|快速开发
1.Android-FilePicker-android图片和文档选择器 项目地址 https://github.com/DroidNinja/Android-FilePicker 2.ViewPag ...
- Linux常见命令（系统命令）
1.查看主机名hostname 2.修改主机名(重启后无效)hostname hadoop 3.修改主机名(重启后永久生效)vi /etc/sysconfig/network[hostname=had ...
- HTTP 首部字段详细介绍
本文是HTTP解析系列第二篇,如果对http协议不是很了解,可以选去看第一篇:带新手走进神秘的HTTP协议,本文主要是对Http的首部字段进行详细解析. HTTP 协议的请求和响应报文中必定包含 HT ...
- [转]scp用法
从本地复制到远程 复制目录命令格式: scp -r local_folder remote_username@remote_ip:remote_folder 或者 scp -r local_folde ...