CSS的未来:一些试验性CSS属性(3)
作者:vocal 来源:前端观察 发布时间:2011-06-10 13:20:00
zoom: reset
通常来说,zoom是一个IE专用的属性。但是webkit也开始支持它了,而且使用值reset,webkit可以实现不错的效果(有趣的是,IE不支持这个值)。它让你重设掉浏览器中正常的缩放行为——如果某个元素被声明了zoom:reset,页面上的其它元素在用户放大页面的时候都会跟着放大。
注:其实,我们常用来禁用chrome强制字体大小的时候用到的-webkit-text-size-adjust:none;也是可以实现类似的效果,不同的是,设置该属性的元素内的文字不会被放大/缩小,但是页面上的其它元素则会变化——神飞
扩展阅读: Safari Developer Library
-webkit-margin-collapse
这个属性属于限制级的,但是它还是非常值得关注。通常,两个相邻的元素的margin会折叠起来(collapse)。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。
最常见的例子就是两个相邻的<p>元素会共享他们的margin值。想要控制这个表现,我们可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等属性。默认值是collapse,值separate则停止共享margin值,也就是说,第一个元素的底部边距和第二个元素的头部边距会正常叠加。
扩展阅读: Safari Developer Library
-webkit-box-reflect
你还记得几乎每个网站都把他们的网站logo或者头部的文字做成倒影的那个年代吗?谢天谢地,那个年代已经过去了,但是如果你要在一些按钮、导航、或者其他UI元素上更好的使用这个技术,-webkit-box-reflect是更好的选择。
这个属性接受above、below、left和right四个关键词,它们设置倒影的方向,它们和一个设置元素和它的倒影建的距离的数字一起使用。同时,蒙板图片也是同样支持的(看上面的-webkit-mask部分,不要搞混了哈)。倒影会自动生成并对布局没有影响。下面的元素只用了CSS,第二个按钮用了-webkit-box-reflect属性。
示例
这个倒影会出现在它的父元素的下面并有5px的间距:
-webkit-box-reflect: below 5px;
这个倒影会投射到元素的右边,没有间距。然后,一个蒙板将会被应用(url(mask.png)):
-webkit-box-reflect: right 0 url(mask.png);
扩展阅读: Safari Developer Library
猜你喜欢
- rs.open语句详细说明rs.Open [第一个参数],  
- <% Function FileCounter(counter_file) Dim fs,txt,fi
- 1.彻底弄懂CSS盒子模式一(DIV布局快速入门) 2.彻底弄懂CSS盒子模式二(导航栏实例) 3.彻底弄懂CSS盒子模式三(浮动的表演和清
- 本XML系列教程将分三部分发布,到最后一期我们将拥有一个功能全面,更加友好的XML菜单。本教程这个第一期涉及到了一些XML的基础知识。大家都
- 如何准确地获得一个整数?当然可以,Format就是做这个的“专家”:function NumbersOnlyNoDecimals(
- 如何做一个看他爱不爱你的小测验?<%CurQ = Request.Form("CurQ")An
- 数据库连接字符串的常见问题和解决方法:基本知识1:SQL Server数据库的身份验证方式,分windows验证,SQL Server验证两
- 有时候想为我们的网页提供多语言支持,如果一种语言用一张网页来做实在太麻烦了,幸好Google提供了语言工具功能,下面介绍如何利用它来实现网页
- 到了今天,数据库已经成了网站的灵魂,可以说,没有对数据进行集中管理就算不上是一个真正的网站。而ASP加数据库,更成了主流中的主流,网站里的用
- 在Windows系统中用“Ctrl+C”和“Ctrl+V”就可以完成复制、粘贴工作,是不是很爽?其实使用a标签的accesskey属性也可以
- 如何直接调用Excel数据?在ASP中,不用ODBC,如何直接调用Excel数据? 在调用处理处,究竟是使用:xlApp.qui
- 今天看到某人博客推荐了http://dragoninteractive.com/这个网站,貌似一些效果做的比较不错,于是打开了看看,不过还真
- 一般上电子商务网站买东西的用户分三种:随便看看,就是不买先看看,买不买再说就是来买东西的这样的需求反应到产品页的购买按钮上,我们一般会看到购
- 出差到了中国雅虎,这里的风格和淘宝很不一样。和雅虎一比,淘宝的办公环境就是个菜市场,闹哄哄,到处是人,在走道里狂奔乱窜,在每个会议室争得面红
- 没有使用动态语句直接报错 错误的 代码如下:alter proc testpapers as begin declare @tems nva
- 前言 绝大多数的Oracle数据库性能问题都是由于数据库设计不合理造成的,只有少部分问题根植于Database Buffer、Share P
- 阅读上一章:打印样式Chapter 12 CSS布局本书到此为止,讨论的主要是页面内部元素,也就是内容,但是大结构怎么办?长久以来,设计者都
- 浏览器的具体功能都储存在服务器端的Browscap.ini中:<% SET
- 1.我在一行结束后按回车键,就跳到隔一行的段落上,如何避免隔行跳到下一段落? A.在一行结束后先按着[Shift]键,再按回车就可以不隔行跳
- 本文介绍了用ASP的AdoDb.Stream读取/写入UTF-8编码格式的文件的方法:函数名称:ReadTextFile 作用:利用AdoD