CSS3之background-clip
1、属性简介
background-clip:padding|border|content|text|!important
2、兼容性
(1)IE6、7、8不兼容
(2)火狐3.0以上兼容
(3)Chrome 2.0.x兼容
3、属性实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3之background-clip</title> <style type="text/css"> body{ background-color:#FCC; width:60%; height:200px; font-size:24px; font-weight:bolder; } div{ background:#C6F url(image.jpg); background-color:#9FF; width:100%; height:100%; -moz-background-clip:padding; -webkit-background-clip:padding; -moz-background-inline-policy: -moz-initial; /* -moz-background-clip:border; -webkit-background-clip:border; -moz-background-clip:!important; -webkit-background-clip:!important; -webkit-background-clip:content; -webkit-background-clip:text;*/ } </style> </head> <body> <div> CSS3之background-clip </div> </body> </html>
4、运行结果
CSS3之background-clip的更多相关文章
- CSS3中background属性的调整
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- css3 背景background
Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...
- css2和CSS3的background属性简写
1.css2:background:background-color || url("") || no-repeat || scroll || 0 0; css3: backg ...
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- css3创建多边形clip属性,可用来绘制不规则图形了
.path1 { clip-path: polygon(5px 10px, 16px 3px, 16px 17px); } .path2 { clip-path: polygon(3px 5px, 1 ...
- CSS背景和CSS3背景background属性
css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...
- css3之background
background background: (1)url(image1.png) right bottom, (2)url(image2.png) center, (3)url(image3.png ...
- [CSS3] CSS Background Images
Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...
- 巧用CSS3之background渐变
常见斑马loading 上图是我们常见的loading进度条,以前都是用一张背景图片平铺的.其实如果抛去兼容性因素,我们可以用零图片纯样式来实现. 一,首先,我们先为容器定义一个纯蓝色背景: box{ ...
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
随机推荐
- 这可能是我觉得最折腾的C++环境配置(编码+调试)--mac+eclipse
本着造福大众的心态,万一可能有人喜欢这种环境开发呢对吧~~折腾了一天,又是谷歌又是百度,讲真遇到报错问题搜出的资料挺少的,看来用这类环境开发C++的人不多,毕竟谁没事干放着xcode,vscode不用 ...
- srs2录制flv文件metadata不准确
测试环境:server:srs2client:librestreaming / yasea srs 配置 dvr录制24分钟flv文件. e:\flv $ ll total drwxr-xr-x Ad ...
- SpringMVC源码情操陶冶-AbstractHandlerMapping
分析下springmvc的HandlerMapping映射的抽象类 初始化操作 通过initApplicationContext()方法进行初始化,其一般是由父类执行ApplicationContex ...
- POJ 2007 Scrambled Polygon [凸包 极角排序]
Scrambled Polygon Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 8636 Accepted: 4105 ...
- 一、爬虫的基本体系和urllib的基本使用
爬虫 网络是一爬虫种自动获取网页内容的程序,是搜索引擎的重要组成部分.网络爬虫为搜索引擎从万维网下载网页.一般分为传统爬虫和聚焦爬虫. 爬虫的分类 传统爬虫从一个或若干初始网页的URL开始,获得初始网 ...
- 树莓派上运行.net core 2.0程序
记录中 参考: https://www.cnblogs.com/songxingzhu/p/7399991.html https://www.cnblogs.com/goodfulcom/p/7624 ...
- WPF字典集合类ObservableDictionary
WPF最核心的技术优势之一就是数据绑定.数据绑定,可以通过对数据的操作来更新界面. 数据绑定最经常用到的是ObservableCollection<T> 和 Dictionary<T ...
- IOS开发之记录用户登陆状态,ios开发用户登陆
IOS开发之记录用户登陆状态,ios开发用户登陆 上一篇博客中提到了用CoreData来进行数据的持久化,CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreDa ...
- is there any way to stop auto block
shadowsocks出现错误日志 tail /var/log/ssserver.log 2017-07-02 12:36:31 ERROR: block all requests from 10.4 ...
- android应用中去android市场去评分的功能实现(吐槽一波个人应用上线...)
一般的app可能会有这中功能,在应用中去android商店评分来提高排名,前段时间也把我的博客园上传到商店,这里不得不吐槽一些android商店的开放平台. 酷派,vivo,oppo,联想不支持个人开 ...