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
猜你喜欢
- Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对
- 很多时候关心的是优化SELECT 查询,因为它们是最常用的查询,而且确定怎样优化它们并不总是直截了当。相对来说,将数据装入数据库是直截了当的
- 1、将css与javascript全部用下边的方法分离到外部文件中去。<link rel="stylesheet"
- 阅读上一章:chapter 5 表单Chapter 6 <strong>,<em>与其他短语元素在引言和前面的章节中
- 经常到这来抄抄改改代码,也贡献一个代码,主要是讨论研究用,没有封装可以进一步改进<!DOCTYPE html PUBLIC "
- jQuery中文入门指南,翻译加实例,jQuery的起点教程中文版译者:Keel此文以实例为基础一步步说明了jQuery的工作方式。现以中文
- 对于使用虚拟主机的站长朋友,我们可能不知道该服务器是否安装了某种我们需要的组件。这时我们可以使用下面的代码来判断。该函数功能:检查是否存在系
- 和数据库打交道要频繁地用到SQL语句,除非你是全部用控件绑定的方式,但采用控件绑定的方式存在着灵活性差、效率低、功能弱等等缺点。因此,大多数
- 如何在约定时间显示特定的提示信息?<%Function Greeting()
- 一、“无”的哲学佛家讲究“因果报应”,有果必有应。此段看似与主题没有血缘关系,实际讲的是“因”。我个人比较喜欢老子的道家思想,并喜欢以其思想
- 以下是IE7中新支持的属性:min-height,max-height,min-width,max-width这个hack还可以使最大高度兼
- 两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”,圆角因使人感觉舒适的
- ORACLE访问SQL SERVER数据库有一篇《Oracle 异构服务实践》讲得很清楚。但里面没有讲如何设置访问多个SQL Server数
- domainname.asp<form method="POST"> &nb
- 这是网站制作很流行的下拉列表两级连动的代码,也是很多人使用的代码。下面,先来看这段代码:<%dim countset&nbs
- 这个类主要解决在类型转换时,如果直接使用类型转换函数,会因为变量为空或者格式不对而导致程序报错,而这种报错在大多数情况下是允许的.例如要转换
- asp创建pdf文件代码,详见以下代码:<%Option ExplicitSub CheckXlDriver()&
- 由于系统自带的MySQL默认字符集不是gbk,因此给数据库的推广应用以及中文程序的开发带来极大的不便,在没完没了的GBK和UTF8的转换过程
- 在一次ASP程序中不能正常连接MSSQL出现出错信息如下:以下为引用的内容:HTTP/1.1 200 OK S
- 今天看了微软JScript官方blog上去年的两篇文章: http://blogs.msdn.com/jscript/archive/200