CSS3之背景剪裁Background-clip
CSS3之背景剪裁Background-clip是CSS3中新添加的内容。这个属性还是比较简单的,主要分五个属性值:border、padding、content、no-clip和text。下面将针对这五个属性值为大家介绍CSS3之背景剪裁Background-clip。
一、Background-clip的语法
1、Background-clip的语法
background-clip: border-box || padding-box || context-box || no-clip || text
2、Background-clip的数值
(1)border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉;
(2)padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉;
(3)context-box:背景从content区域向外裁剪,超过context区域的背景将被裁剪掉;
(4)no-clip: 背景从border区域向外裁剪背景。
(5)text:文本剪裁
二、Background-clip的兼容
1、Background-clip的兼容情况
2、Background-clip的兼容写法
/*Firefox3.6-*/
-moz-background-clip: border-box || padding-box || context-box || no-clip
/*Webkit*/
-webkit-background-clip: border-box || padding-box || context-box || no-clip || text
/*opera*/
-o-background-clip: border-box || padding-box || context-box || no-clip
/*W3C标准 Firefox4.0+*/
background-clip: border-box || padding-box || context-box || no-clip || text
三、Background-clip的实例
1、border-box效果
CSS代码:
div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg");border:20px solid #ccc;padding:20px;;
-webkit-background-clip:border-box;
}
HTML代码:
<div></div>
预览效果:
2、padding-box效果
CSS代码:
div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg");border:20px solid rgba(0,0,0,0.3);padding:20px;
-webkit-background-clip:border-box;
}
/*注意:使用border-box的时候,border颜色必须是rgba颜色,不然会没有效果*/
HTML代码:
<div></div>
预览效果:
3、context-box效果
CSS代码:
div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg");border:20px solid rgba(0,0,0,0.3);padding:20px;
-webkit-background-clip:content;
}
HTML代码:
<div></div>
预览效果:
4、no-clip效果
CSS代码:
div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg");border:20px solid rgba(0,0,0,0.3);padding:20px;
-webkit-background-clip:no-clip;
}
HTML代码:
<div></div>
预览效果:
5、Text效果
CSS代码:
div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg");border:20px solid rgba(0,0,0,0.3);
padding:20px;font-size:80px;font-weight:bold;color:rgba(0,0,0,0.1);
-webkit-background-clip:text;
}
HTML代码:
<div>梦龙小站</div>
预览效果:
CSS3之背景剪裁Background-clip就为大家介绍到这里,从现在开始慢慢接触着这些新兴技术,让自己的代码与时俱进,一直是我的座右铭哟,在这里与大家共勉,希望能对大家有所帮助。
CSS3之背景剪裁Background-clip的更多相关文章
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- CSS3之背景定位原点background-origin
背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的.CSS3之背景定位原点background-origin的属性值有三个:border.p ...
- 移动开发之css3实现背景几种渐变效果
移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域. 产品设计中使用渐变色的好处:1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观 ...
- 0016 CSS 背景:background
目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...
- CSS 背景-CSS background
这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法 - TOP CSS背景基础知识 CSS 背 ...
- CSS下背景属性background的使用方法
背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值 ...
- 基于CSS3动态背景登录框代码
基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- CSS3透明背景+渐变样式
CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...
随机推荐
- QSettings介绍
简介 QSettings类提供了持久的跨平台应用程序设置. 用户通常期望应用程序记住它的设置(窗口大小.位置等)所有会话.这些信息通常存储在Windows系统注册表,OS X和iOS的属性列表文件中. ...
- $('div','li')
要搞清楚$('div','li') 和 $('div , li') 和 $('div li') 区别$('div','li')是$(子,父),是从父节点里找子,而不是找li外面的div $('div ...
- apache开源项目 -- Tuscany
tuscany是Apache组织关于SOA实现的一个开放源码的工程项目,目前处于孵化期阶段. 该项目主要基于SCA,SDO,DAS等技术上实现的. SCA 的基本概念以及 SCA 规范的具体内容并不在 ...
- oracle中怎么查看存储过程的源码
今天想找几天前写的存储过程的源码看看,发现自己熟悉的命令怎么都不好使,要不提示标示符错误要不就是提示未选定行,通过baidu得知type跟name变量要弄成大写的.. select text from ...
- 庖丁解牛-----Live555源码彻底解密(RTP打包)
本文主要讲解live555的服务端RTP打包流程,根据MediaServer讲解RTP的打包流程,所以大家看这篇文章时,先看看下面这个链接的内容; 庖丁解牛-----Live555源码彻底解密(根据M ...
- 搜集的一些RTMP项目,有Server端也有Client端
查询一些RTMP的协议封装时找到了一些RTMP开源项目,在这里列举一下,以后有时间或是有兴趣可以参考一下: just very few of them. Red5 only contains a se ...
- squid+nginx+apache
一.前言 二.编译安装 三.安装MySQL.memcache 四.安装Apache.PHP.eAccelerator.php-memcache 五.安装Squid 六.后记 一.前言,准备工作当前,L ...
- (5)Quartz学习
原文:http://blog.csdn.net/zxl315/article/details/10879927 介绍Quartz Quartz是一个开源的任务调度系统,它能用来调度很多任务的执行. 运 ...
- MySQL基础之第10章 查询数据
10.1.基本查询语句 SELECT 属性列表 FROM 表名和视图列表[WHERE条件表达式1][GROUPBY 属性名1 [HAVING条件表达式2]][ORDERBY 属性名2[ASC|DESC ...
- Mysql 的存储过程和存储函数
优点: v 提高安全性 v 简化mysql查询 v 减轻带宽负担 缺点: v 增加服务器负担 v 对我们开发者来说,难度大一点 PHP中的函数 Function funname(参数){ //函数体 ...