用于WebKit的CSS诀窍[译]
作者:vocal 来源:前端观察 时间:2009-03-11 20:03:00
使用在Safari和WebKit中可用的CSS高级特性,你可以为你的网站和网络应用带来一个新的级别的令人兴奋的东西。WebKit是Safari浏览器和Google Chrome的渲染引擎。
因为浏览器会简单的无视他们不支持的CSS属性,所以在其他浏览器中,这些秘诀中的大部分可能会无效。使用只用WebKit支持的属性的网页在基于WebKit的浏览器中会有非常出色的视觉和体验,并且在其他浏览器中也会有某些效果。
注意: 你在本文中看到的-webkit前缀是一个浏览器生产商通常使用的一种方式,它暗示该CSS属性或规则尚未成为W3C标准的一部分。比如,box-shadow属性还只是开发中的CSS3标准的一部分。基于Mozilla的浏览器使用-moz前缀。
简单的阴影
让我们从向你展示为网页中的任意元素添加阴影效果是多么的简单开始吧。下面的代码片段将演示一个轻微旋转并有阴影的图片,这两个效果都是使用CSS添加的。
<img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />
上面的代码中,transform CSS 属性实现图片旋转,box-shadow属性为图片添加阴影效果。你可以改变旋转的角度,或者是阴影的参数,仅仅调整那些参数就OK了。
尝试一下,你将看到下面演示的旋转图片效果。
截图1.图片选择和阴影
上面的CSS是在一个style属性中,当然你可以把它们作为一个类放到一个style标签或独立的样式文件中。
过去,服务器端代码常常被请求用来处理图片来实现阴影效果。现在使用CSS扩展你就可以在浏览器中实现它,而且看起来很棒。
标签:css,浏览器,Safari,Chrome,WebKit
0
投稿
猜你喜欢
pytorch geometric的GNN、GCN的节点分类方式
2022-12-24 16:01:23
python 爬虫请求模块requests详解
2022-09-06 01:33:32
Python绘制数据图表的超详细教程
2021-03-05 01:54:36
用CSS实现柱状图(Bar Graph)的方法(四)—table实现复杂柱状图
2008-05-28 12:55:00
asp下用fso和ado.stream写xml文件的方法
2011-04-07 10:55:00
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2021-06-12 15:16:02
python设置代理和添加镜像源的方法
2022-12-03 10:26:39
关于networkx返回图的邻接矩阵问题
2021-04-09 13:10:35
asp日期时间格式化函数
2009-12-14 12:56:00
Spring @Enable模块驱动原理及使用实例
2023-11-07 10:11:51
解决Tensorflow 使用时cpu编译不支持警告的问题
2023-12-30 07:28:01
python中resample函数实现重采样和降采样代码
2022-10-24 05:49:23
关于ASP生成伪参数加密技巧
2008-07-16 12:05:00
MySQL数据表损坏的正确修复方案
2024-01-20 10:52:16
深入浅析JavaScript中的arguments对象(强力推荐)
2024-04-25 13:12:46
ASP处理XSLT转换XML的实现
2008-10-20 18:37:00
Python缓存技术实现过程详解
2023-08-03 12:31:30
深入了解Django中间件及其方法
2022-04-22 09:19:10
python简单实现插入排序实例代码
2021-11-27 14:33:04
Python yield 小结和实例
2023-07-21 15:37:39