《
用于WebKit的CSS技巧》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302344452013.htm
使用纯CSS实现多卷，而不必HTML的table是件相称辣手的事件。因为CSS3用于多卷布局的属性在Safari和WebKit中已经可用，你可以明白的定义卷数，正确切现你所想要的效果。先看一下下面的CSS和HTML代码：
截图9. 滑出之后的滑出盒子
这些代码定义了卷中的HTML代码。这些代码定义了这个DIV应当被分成3卷。每个段落就在他们本人的卷里面。
因为浏览器会简单的疏忽他们不支持的CSS属性，所以在其他浏览器中，这些秘诀中的大部分可能会无效。使用只用WebKit支持的属性的网页在基于WebKit的浏览器中会有十分杰出的视觉和体验，并且在其余浏览器中也会有某些效果。
尝试一下，你将看到下面演示的旋转图片效果。
截图1.图片抉择和阴影
以下是代码片段：
<div class="swapper">
<img class="img1" style="position: absolute;" src="megan.jpg">
<img class="img2" src="megan2.jpg">
</div>
WebKit同样供给一些新的把持来使用于你的页面。下面的例子演示一个程度滑动条、一些新样式的按钮以及一个很像Safari工具栏的搜寻框
以下是代码片段：
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; }
将来走向
以下是代码片段：
<style>
img { -webkit-transform: scale(0.5); }
img:hover { -webkit-transform: scale(1); }
</style>
<img src="megan.jpg" />
这些例子的绝大局部功效是由CSS实现的，只是有很少的JavaScript。
动画图片翻转
当谈到在Safari和WebKit顶用新的和奇特的方式使用CSS，这篇文章只是描写了一个可行性。有各种各样的新的CSS特性可以用来创立独特的、有视觉冲击力的效果，你可以独自的实现他们，也可以结合使用！
简单的阴影
假想: 纯CSS的渐变效果！
以下是代码片段：
<script>
function popout() {
document.getElementById(’slider’).style.webkitTransform = ’translate(105px,0)’;
}
</script>
这些代码同样阐明了一种在使用一种尚未成为W3C标准的一部分时的牢靠机制.这段代码指定了”column-count”和”column-gap”属性，并带有”-webkit”和”-moz”前缀，以及不前缀的情形。这象征着这段代码将会像基于Mozilla的浏览器一样可以在Safari和WebKit的浏览器中运行，而且一旦CSS3标准被终极断定下来之后，那些前缀就可以去掉了。
以下是代码片段：
<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>
转动与弹出
让我们从向你展现为网页中的任意元素添加阴影效果是如许的简单开端吧。下面的代码片段将演示一个稍微旋转并有阴影的图片，这两个效果都是使用CSS增添的。
将鼠标从图片上挪开，图片又会恢还原状。
以下是代码片段：
<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/>
在这里，”transition”属性使用简化符号来指定（图片）过渡的所有参说。第一个参数将属性指定为动画，第二个参数指定时间，第三个参数为简便指定时间功能。”ease-in-out”只是众多你可以只有安排的时间功能中的一个。你还可以指定一个线形变换、渐入、渐出或高级的立体贝塞尔曲线效果！
你能够尝试这个例子，就像下面这样：
以下是代码片段：
<img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />
鼠标滑过图片，它就会弹出并变大,用LI布局表单解决文字不能对齐的方法，如下所示。
题记：这篇文章来自于Apple开发者社区，专门先容WebKit中心的浏览器的一些新的特征，其中最重要的是对CSS3的支撑。假如你想开发一些很酷的界面后果，我倡议你应用WebKit核心的浏览器，由于目前来说，无论是Safari仍是Chrome，都堪称是浏览器中的先锋——对W3C的支持最好，JS引擎的效率最高，浏览器的履行效力跟反映速度也是最快的。我们不能被落后的阅读器拖住了咱们前进的步调，我们诚然要斟酌比拟落伍的浏览器，然而对前端开发职员来说，提高更主要。
使用这种办法， 如果浏览器不支持多卷布局，段落将一个接着一个显示。正如本文前面提到的,用DNSPOD解析域名 CDN加速网站收录无影响，这些方式在不支持它们的浏览器中会被降级（也就是无效）。
圆角可能会给网站页面带来一些麻烦，好比，它可能需要为每个角使用一张图片，但是这可能会引起某些表现上的问题（比如不同的浏览器可能表示上会有轻微的差异）。在WebKit中有效的CSS3的”border-radius”属性让实现圆角变得简单，它只要要几行简单的CSS代码。如下所示：
你可以自己亲自休会一下这个效果，你将会看到下图中的效果。
截图4. 一个CSS只能制订一个渐变效果
以下是代码片段：
#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;
}
第一个div中border-radius被设置为所有的角。然后第二个div，只是左下角和右上角。第三个div就像一个tab，只是上面的角被设置为圆角。最后一个div被设置为单边的圆角，只有右边的两个角是圆角。
全新的表单节制
这个例子的HTML代码如下：
新的滑动掌握条尤其好用，因为这个滑动控制条确实不太好用JavaScript来写，并且还要在每个浏览器中都兼容。
截图3.翻转之前的图片
下一个示例将演示当你把鼠标放到一张图片上事，它会弹出的效果。实现这些只须要使用一个hover款式和一个度数改变。该效果的CSS如下所示。
上面的代码中，transform CSS 属性实现图片旋转，box-shadow属性为图片增加阴影效果。你可以转变旋转的角度，或者是暗影的参数，仅仅调剂那些参数就OK了。
截图2.翻转后的图片
以下是代码片段：
<div id="slider">
Slider<br/>Content
</div>
<div id="box1">
<a href="javascript:popout();">Popout</a>
</div>
以下是代码片段：
#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px;
text-align:center; background:#eee; }
留神: 你在本文中看到的-webkit前缀是一个浏览器出产商通常使用的一种方式，它暗示该CSS属性或规矩尚未成为W3C标准的一部分。比方，box-shadow属性还只是开发中的CSS3尺度的一部门。基于Mozilla的浏览器使用-moz前缀。
你可以在下面看到效果：
这里有个父级盒子，以及在它下面的一个滑动盒子。滑动盒子上的”transition”属性定义动作将破费半分钟，并使用一个”ease-in”时光殊效。JavaScript 通过设置”transform”属性到滑动盒子，从而在用户点击一个链接时引动员作,用CSS让页脚始终保持底部的方法。也就是说，动画只是在用户执行一个像点击弹出链接一样的动作之后才会运行。
相干： Safari参考样式库之webkit
这段样式代码定义所有的在boxes里面的DIV都要有一个比较大的border（边框）、边距、宽度、背景等。而后每个div标签的border-radius被设置为不同的方法。你可以在下面看到运行成果：
使用在Safari和WebKit中可用的CSS高等特性，你可认为你的网站和网络利用带来一个新的级别的令人高兴的货色。WebKit是Safari浏览器和Google Chrome的渲染引擎。
最后的例子是一个简单的使用了一些在WebKit中可用的视觉效果的弹出框，使用的CSS和JavaScript 代码如下：
截图6. 纯CSS圆角
截图5. 多卷
从前，服务器端代码经常被恳求用来处置图片来实现阴影效果。当初使用CSS扩大你就可以在浏览器中实现它，而且看起来很棒。
正如你所能看到的那样，你可以使用多少行CSS来实现这个效果。
你可以通过下面的截图看到演示效果。
另一个前端工程师常见的景象是，当用户将鼠标放到图片上时，变换为另一张图片。在这个技能中，让我们看看如何让图片从一个到另一个渐变交换，而不是简单的直接交流两张图片。实现这个效果的CSS和HTML如下：
以下是代码片断：
<div id="columns">
<p>Column A</p>
<p>Column B</p>
<p>Column C</p>
</div>
常识点：WebKit是开源的Web浏览器引擎，苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发的。
CSS 多卷布局
截图8. 滑动盒子在弹出之前。
如果你在链接上点击，那么这个滑动元素就会很快的滑出。
简略的CSS圆角
Tag：CSS技巧 WebKit CSS技巧 WebKit
截图7. WebKit可用的一些新的按钮
上面的CSS是在一个style属性中，当然你可以把它们作为一个类放到一个style标签或独破的样式文件中。
以下是代码片段：
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 25px;
-moz-column-count: 3;
-moz-column-gap: 25px;
column-count: 3;
column-gap: 25px;
}
一个简单的Pop-out
--> [
网站建设之]用于WebKit的CSS技巧
(责任编辑：网站建设)
用于WebKit的CSS技巧相关文章