使用在WebKit中可用的CSS高级特性,可以为你的网站或网络应用带来一个新的更令人兴奋的东西。
WebKit是Safari和Google Chrome浏览器的渲染引擎。所以,本文中的诀窍在Safari3/4和Chrome1.0/2.0中都是支持的。
因为浏览器会简单的无视他们不支持的CSS属性,所以在其他浏览器中,这些诀窍中的大部分可能会无效。使用只有WebKit支持的CSS属性的网页在基于WebKit的浏览器中会有非常出色的视觉效果和体验,并且在其他浏览器中也可能会有某些效果——至少不会有负面的影响。
注意: 你在本文中看到的-webkit前缀是一个浏览器生产商通常使用的一种方式,它暗示该CSS属性或规则尚未成为W3C标准的一部分。比如,box-shadow属性还只是开发中的CSS3标准的一部分。基于Mozilla的浏览器使用-moz前缀。
1.简单的阴影
让我们从向你展示为网页中的任意元素添加阴影效果是多么的简单开始吧。下面的代码片段将演示一个轻微旋转并有阴影的图片,这两个效果都是使用CSS添加的。
1
|
<img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />
|
上面的代码中,transform CSS 属性实现图片旋转,box-shadow属性为图片添加阴影效果。你可以改变旋转的角度,或者是阴影的参数,仅仅调整那些参数就OK了。
尝试一下,你将看到下面演示的旋转图片效果。

截图1.图片选择和阴影
上面的CSS写在一个img标签的style属性中,当然你可以把它们作为一个类放到一个style标签或独立的样式文件中。
过去,常常使用服务器端代码来处理图片以实现阴影效果,现在使用简单的CSS样式你就可以在客户端浏览器中实现它,而且看起来很棒。
2.翻转与弹出
下一个示例将演示当你把鼠标放到一张图片上时,它会弹出的效果。实现这些只需要使用一个hover样式和一个度数改变。该效果的CSS如下所示。
1
2
3
4
|
<style>
img { -webkit-transform: scale(0.5); }
img:hover { -webkit-transform: scale(1); }
</style>
|
1
|
<img src="megan.jpg" />
|
鼠标滑过图片,它就会弹出并变大,如下所示。

截图2.翻转后的图片
将鼠标从图片上挪开,图片又会恢复原状。

截图3.翻转之前的图片
正如你所能看到的那样,你可以使用几行CSS来实现这个效果。
3.带动画效果的图片翻转
前端工程师常见的另外一个现象是,当用户将鼠标放到图片上时,变换为另一张图片。在这个技巧中,让我们看看如何让图片从一个到另一个渐变切换,而不是直接简单的交换两张图片。实现这个效果的CSS和HTML如下:
1
2
3
|
div.swapper img { -webkit-transition: opacity 1s ease-in-out; }
img.img1, div.swapper:hover img.img2 { opacity: 1.0; }
div.swapper:hover img.img1, img.img2 { opacity: 0; }
|
1
2
3
4
|
<div class="swapper">
<img class="img1" style="position: absolute;" src="megan.jpg">
<img class="img2" src="megan2.jpg">
</div>
|
在这里,”transition”属性使用简化符号来指定(图片)过渡的所有参数。第一个参数将属性指定为动画,第二个参数指定时间,第三个参数为简便指定时间功能。”ease-in-out”只是众多你可以自由支配的时间功能中的一个。你还可以指定一个线形变换、渐入、渐出或高级的立体贝塞尔曲线效果!
你可以自己亲身体验一下这个效果,如下图所示:

截图4. 一个CSS只能制定一个渐变效果
设想: 纯CSS的渐变效果!
4.CSS 多卷布局
使用纯CSS,而不用HTML的table来实现多卷是件相当棘手的事情。但是,由于CSS3用于多卷布局的属性在WebKit中已经被支持,你可以通过明确的定义卷数,正确实现你所想要的效果。先看一下下面的CSS和HTML代码:
1
2
3
4
5
6
7
8
|
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 25px;
-moz-column-count: 3;
-moz-column-gap: 25px;
column-count: 3;
column-gap: 25px;
}
|
1
2
3
4
5
|
<div id="columns">
<p>Column A</p>
<p>Column B</p>
<p>Column C</p>
</div>
|
这些代码定义了这个DIV应该被分成3卷。HTML中的每个段落正好就在他们自己的卷里面(这并不是说必须要用3个
来显示每个卷,事实上卷数和P标签是无关的。)。
这些代码同样说明了在使用尚未成为W3C标准的部分CSS样式时的一种可靠机制。这段代码指定了”column-count”和”column-gap”属性,并带有”-webkit”和”-moz”前缀,以及没有前缀的情况。这意味着这段代码将会像Mozilla核心浏览器一样可以在WebKit的浏览器中运行,而且一旦CSS3标准被最终确定下来之后,那些前缀就可以去掉了,而没有前缀的代码也将可以被执行。
你可以在下面看到效果:

截图5. 多卷
使用这种方法后,如果浏览器不支持多卷布局,段落将一个接着一个显示,就像没有设置多卷一样。正如本文前面提到的,这些方法在不支持它们的浏览器中会被降级(也就是无效)。
关于多卷的更详细介绍,请查看这篇文章:http://www.qianduan.net/?p=4832
5.简单的CSS圆角
圆角可能会给页面的实现带来一些难度,比如,它可能需要为每个角使用一张图片,但是这可能会引起某些表现上的问题(比如不同的浏览器可能表现上会有细微的差别)。在WebKit中被支持的CSS3的”border-radius”属性让实现圆角变得非常简单,它只需要几行简单的CSS代码。如下所示:
1
2
|
#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px;
text-align:center; background:#eee; }
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div id="boxes">
<div style="-webkit-border-radius:15px;">
All sides
</div>
<div style="-webkit-border-bottom-left-radius:15px;-webkit-border-top-right-radius:15px;">
Opposite corners
</div>
<div style="-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;">
Top
</div>
<div style="-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;">
Side
</div>
</div>
|
这段样式代码定义所有的在boxes里面的DIV都要有一个比较大的border(边框)、边距、宽度、背景等。然后每个div标签的border-radius被设置为不同的方式。你可以在下面看到运行结果:

截图6. 纯CSS圆角
第一个div中border-radius被设置为所有的角,然后第二个div只有左下角和右上角,第三个div就像一个tab,只有上面的角被设置为圆角,最后一个div被设置为单边的圆角,只有右边的两个角是圆角。
6.全新的表单控制
WebKit同样提供一些可用于你的页面全新的控制。下面的例子演示一个水平滑动条、一些新样式的按钮以及一个很像Safari工具栏的搜索框
1
2
3
4
|
<input type="range" style="-webkit-appearance:slider-horizontal;"><br/><br/>
<button style="-webkit-appearance:button;width:200px;height:30px;">gradient button</button><br/><br/>
<button style="-webkit-appearance:push-button;width:200px;">aqua button</button><br/><br/>
<input type="text" style="-webkit-appearance:searchfield;" value="kitten"></input><br/>
|
运行效果:

截图7. WebKit可用的一些新的按钮
新的滑动控制条尤其好用,因为这个滑动控制条的确不太好用JavaScript来写,并且还要在每个浏览器中都兼容。
7.一个简单的Pop-out
最后的例子是一个简单的使用了一些在WebKit中可用的视觉效果的弹出框。
CSS和JavaScript 代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
#box1 {
z-index: 100;
position:absolute;
top:5px; left:5px;
width:100px;
height:250px;
padding:5px;
-webkit-border-radius:10px;
border: 2px solid black;
background: #dddddd;
z-index: 200;
}
#slider {
z-index: 100;
position:absolute;
top:30px; left:5px;
height:200px;
width:90px;
padding-top:10px;
padding-left:15px;
-webkit-border-radius:10px;
border: 1px solid black;
background: #eeeeee;
-webkit-transition: -webkit-transform 0.5s ease-in;
}
|
1
2
3
4
5
|
<script>
function popout() {
document.getElementById('slider').style.webkitTransform = 'translate(105px,0)';
}
</script>
|
这里有个父级盒子,以及在它下面的一个滑动层。滑动层上的”transition”属性定义动作将花费半分钟,并使用一个”ease-in”时间特效。 通过JavaScript设置”transform”属性到滑动层,从而在用户点击一个链接时引发动作。也就是说,动画只是在用户执行一个像点击链接一样的动作之后才会运行。
这个例子的HTML代码如下:
1
2
3
4
5
6
|
<div id="slider">
Slider<br/>Content
</div>
<div id="box1">
<a href="javascript:popout();">Popout</a>
</div>
|
运行结果:

截图8. 滑动层在弹出之前。
如果你在链接上点击,那么这个滑动元素就会很快的滑出。

截图9. 滑出之后的滑动层
这些例子的绝大部分功能是由CSS实现的,只是有很少的JavaScript。
未来走向
关于在WebKit中使用新的和独特的CSS,这篇文章只是描述了一个一小部分。有各种各样的新的CSS特性可以用来创建独特的、有视觉冲击力的效果,你可以单独的实现他们,也可以联合使用,前端开发社区等不及你来跟进了!
题记:这篇文章来自于Apple开发者社区,专门介绍WebKit核心的浏览器的一些新的特性,其中最主要的是对CSS3的支持。如果你想开发一些很酷的界面效果,前端观察建议你使用WebKit核心的浏览器,因为目前来说,无论是Safari还是Chrome,都可谓是浏览器中的先锋——对W3C的支持最好,JS引擎的效率最高,浏览器的执行效率和反应速度也是最快的。我们不能被落后的浏览器拖住了我们前进的步伐,我们固然要考虑比较落后的浏览器,但是对于前端开发人员来说,进步更重要。
相关推荐
- **只支持WebKit的属性**:列举了一些仅在基于WebKit的浏览器中可用的CSS属性,如 `-webkit-transform`。 - **只支持Gecko的属性**:指出了只在基于Gecko引擎的浏览器中支持的CSS特性。 - **混合的属性**:介绍了...
嵌入式八股文面试题库资料知识宝典-华为的面试试题.zip
训练导控系统设计.pdf
嵌入式八股文面试题库资料知识宝典-网络编程.zip
人脸转正GAN模型的高效压缩.pdf
少儿编程scratch项目源代码文件案例素材-几何冲刺 转瞬即逝.zip
少儿编程scratch项目源代码文件案例素材-鸡蛋.zip
嵌入式系统_USB设备枚举与HID通信_CH559单片机USB主机键盘鼠标复合设备控制_基于CH559单片机的USB主机模式设备枚举与键盘鼠标数据收发系统支持复合设备识别与HID
嵌入式八股文面试题库资料知识宝典-linux常见面试题.zip
面向智慧工地的压力机在线数据的预警应用开发.pdf
基于Unity3D的鱼类运动行为可视化研究.pdf
少儿编程scratch项目源代码文件案例素材-霍格沃茨魔法学校.zip
少儿编程scratch项目源代码文件案例素材-金币冲刺.zip
内容概要:本文深入探讨了HarmonyOS编译构建子系统的作用及其技术细节。作为鸿蒙操作系统背后的关键技术之一,编译构建子系统通过GN和Ninja工具实现了高效的源代码到机器代码的转换,确保了系统的稳定性和性能优化。该系统不仅支持多系统版本构建、芯片厂商定制,还具备强大的调试与维护能力。其高效编译速度、灵活性和可扩展性使其在华为设备和其他智能终端中发挥了重要作用。文章还比较了HarmonyOS编译构建子系统与安卓和iOS编译系统的异同,并展望了其未来的发展趋势和技术演进方向。; 适合人群:对操作系统底层技术感兴趣的开发者、工程师和技术爱好者。; 使用场景及目标:①了解HarmonyOS编译构建子系统的基本概念和工作原理;②掌握其在不同设备上的应用和优化策略;③对比HarmonyOS与安卓、iOS编译系统的差异;④探索其未来发展方向和技术演进路径。; 其他说明:本文详细介绍了HarmonyOS编译构建子系统的架构设计、核心功能和实际应用案例,强调了其在万物互联时代的重要性和潜力。阅读时建议重点关注编译构建子系统的独特优势及其对鸿蒙生态系统的深远影响。
嵌入式八股文面试题库资料知识宝典-奇虎360 2015校园招聘C++研发工程师笔试题.zip
嵌入式八股文面试题库资料知识宝典-腾讯2014校园招聘C语言笔试题(附答案).zip
双种群变异策略改进RWCE算法优化换热网络.pdf
内容概要:本文详细介绍了基于瞬时无功功率理论的三电平有源电力滤波器(APF)仿真研究。主要内容涵盖并联型APF的工作原理、三相三电平NPC结构、谐波检测方法(ipiq)、双闭环控制策略(电压外环+电流内环PI控制)以及SVPWM矢量调制技术。仿真结果显示,在APF投入前后,电网电流THD从21.9%降至3.77%,显著提高了电能质量。 适用人群:从事电力系统研究、电力电子技术开发的专业人士,尤其是对有源电力滤波器及其仿真感兴趣的工程师和技术人员。 使用场景及目标:适用于需要解决电力系统中谐波污染和无功补偿问题的研究项目。目标是通过仿真验证APF的有效性和可行性,优化电力系统的电能质量。 其他说明:文中提到的仿真模型涉及多个关键模块,如三相交流电压模块、非线性负载、信号采集模块、LC滤波器模块等,这些模块的设计和协同工作对于实现良好的谐波抑制和无功补偿至关重要。
内容概要:本文探讨了在工业自动化和物联网交汇背景下,构建OPC DA转MQTT网关软件的需求及其具体实现方法。文中详细介绍了如何利用Python编程语言及相关库(如OpenOPC用于读取OPC DA数据,paho-mqtt用于MQTT消息传递),完成从OPC DA数据解析、格式转换到最终通过MQTT协议发布数据的关键步骤。此外,还讨论了针对不良网络环境下数据传输优化措施以及后续测试验证过程。 适合人群:从事工业自动化系统集成、物联网项目开发的技术人员,特别是那些希望提升跨协议数据交换能力的专业人士。 使用场景及目标:适用于需要在不同通信协议间建立高效稳定的数据通道的应用场合,比如制造业生产线监控、远程设备管理等。主要目的是克服传统有线网络限制,实现在不稳定无线网络条件下仍能保持良好性能的数据传输。 其他说明:文中提供了具体的代码片段帮助理解整个流程,并强调了实际部署过程中可能遇到的问题及解决方案。
基于C#实现的检测小说章节的重复、缺失、广告等功能+源码+项目文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档 基于C#实现的检测小说章节的重复、缺失、广告等功能+源码+项目文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档~ 基于C#实现的检测小说章节的重复、缺失、广告等功能+源码+项目文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档 基于C#实现的检测小说章节的重复、缺失、广告等功能+源码+项目文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档 基于C#实现的检测小说章节的重复、缺失、广告等功能+源码+项目文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档 基于C#实现的检测小说章节的重复、缺失、广告等功能+源码+项目文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档