CSS的未来:一些试验性CSS属性
作者:vocal 来源:前端观察 发布时间:2011-06-10 13:20:00
尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius、box-shadow或者transform等。它们有良好的文档、很好的测试并且最常用到,所以如果你最近在设计网站,你很难能脱离它们。
但是,隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性,但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视),但是其它的属性应该得到更多的认可。最伟大的财富隐藏在Webkit的下面,而且在iPhone、iPad和Android apps的时代,开始了解它们会灰常有用。就连Firefox等使用的Gecko引擎,也提供了一些独特的属性。在本文中,我们将看一下鲜为人知的CSS 2.1和CSS3属性以及它们在现代浏览器中的支持情况。
说明: 对于每个属性,我们这里规定:”WebKit” 即指代使用Webkit内核的浏览器(Safari、Chrome、iPhone、iPad、Android等),”Gecko“指代采用Gecko内核的浏览器(Firefox等)。然后有的属性是官方CSS 2.1. 规范的一部分,这意味着更多的浏览器甚至一些古老的浏览器也会支持它们。最后,一个CSS3 的标签标明遵守这个标准,被最新的浏览器版本——比如Firefox 4、Chrome 10、Safari 5、Opera 11.10以及IE9支持的属性。
WebKit特有属性
-webkit-mask
这个属性是相当强大的,所以详细的介绍超出了本文的范畴,它非常值得深入研究,因为它可以在实际应用中为你省掉很多时间。
-webkit-mask让为一个元素添加蒙板成为可能,从而你可以创建任意形状的花样。蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候会覆盖下面的元素,为1的时候会完全显示下面的内容。相关的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等,严重依赖来自于background中的语法。更多信息请查看webkit的博客和下面的链接。
示例
图片蒙板:
.element{
background: url(img/image.jpg) repeat;
-webkit-mask: url(img/mask.png);
}
示例
渐变蒙板:
.element2 {
background: url(img/image.jpg) repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
扩展阅读: Safari Developer Library
猜你喜欢
- pycharm是编辑python很好使用的工具。下面看看如何安装pycharm工具/原料:pycharm安装包方法/步骤:在网上下载pych
- 前言因为一直在几个平台发文章,发现有些平台并不会检测文章中的图片是否会包含二维码,但是其中也有平台会去检测,所以就去研究了一下python如
- 准备本篇文章译自英文文档 Compile PyTorch Models。作者是 Alex Wong。更多 TVM 中文文档可访问 &
- 来源:http://stackoverflow.com/questions/3806562/ways-to-move-up-and-down
- 代码'########### '检测远程文件是否存在 '########### function CheckURL(
- 相信只要学习python的同学对于虚拟环境这个概念肯定不会太陌生,虚拟环境指的是一个个单独隔离的python开发环境。各个虚拟环境之间互不干
- 1.where语法和用法(1)语法:where <criteria> 即where <查询条件>具体查询语句:sel
- 前言pandas数据框针对高维数据,也有多层索引的办法去应对。多层数据一般长这个样子可以看到AB两大列,下面又有xy两小列。 行有abc三行
- 闭包是Python装饰器的基础。要理解闭包,先要了解Python中的变量作用域规则。变量作用域规则首先,在函数中是能访问全局变量的:>
- 大家都知道Vue.js是中国人创造出来的,简单易用,所以必须要支持一下Vue采用的MVVM设计模式也就是说model和view绑定 mode
- 子节点部分选中时父节点也选中如果需求是:选中任何一个子节点都默认选择父节点,怎么办?其实,element-ui也提供了方案,常规下,如果子节
- 本文实例分享了Python文本生成二维码的详细代码,供大家参考,具体内容如下测试一:将文本生成白底黑字的二维码图片测试二:将文本生成带log
- 这篇文章不谈大道理,只谈细节。关于facebook的大道理,大家可以去海内网的帖子《谁去救救麦田老师吧》讨论。那里有很多IT评论高手,谈的很
- 1、参数个数控制parser.add_argument('-i', '--integers', nargs=
- 创建一个优秀的可视化图表的关键在于引导读者,让他们能理解图表所讲述的故事。在一些情况下,这个故事可以通过纯图像的方式表达,不需要额外添加文字
- 思考:当我们输入这个语句的时候,Python内部是如何去创建这个对象的?a = 1.0对象使用完毕,销毁的时机又是怎么确定的呢?下面,我们以
- 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转。利用ajax技术和FormData()对象可以有效的解决
- HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内容
- //创建成绩表 create table result( stu_
- 问题(来自Udacity机器学习工程师纳米学位预览课程)用 Python 实现函数 count_words(),该函数输入字符串 s 和数字