一个按钮引发的css3知识

来源:http://www.html5cn.org/article-5971-1.html

 

还在用死板的图片做按钮的背景吗,我之前就这么用,但现在不了,也没那么绝对,假如你的老板,非让你把ie6的问题都解决完,那你有两种方法,一继续用图片,二辞职走人,追逐刺激的新技术吧!哦,好像在国外,有一种玩意css3他不叫新技术,人家玩的差不多了。

      看看下边的这个按钮,话说,纯css打造,当然,我不敢直面淋漓的ie浏览器,你也算了,来看看火狐,谷歌,以及移动端的表现吧。
     
      看css代码,先后运用了空城计,反间计,糊里糊涂砸车计,唉?等等,好熟悉的台词,完全不在一个世界啊,赶紧回来-------先后应用了圆角border-radius、投影box-shadow、文本投影text-shadow、背景渐变linear-gradient、倒影-webkit-box-reflect。

圆角border-radius border-radius:length|%

这是一个缩写,相当于四个角设置同样的值,用px或者百分比都可以,想要成为圆形,就用50%,你也可以单独设置每个角,语法和设置边框有的一拼,例如border-radius:5px 2px 4px 1px,分别是左上、右上、右下、左下,你恍然大悟,不就是顺时针吗,哦,是这样的,也可以啰嗦的分开写,border-top-left-radius:5px;太罗嗦,我就不细讲这个分开写了,兼容IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持。。。还有为了兼容老版本的火狐啊,谷歌啊等等,你可以加前缀,火狐-moz、谷歌/苹果-webkit、Opera -o、ie -ms。注意样式顺序最好是私有样式然后标准样式.

 

 

投影box-shadow box-shadow:h-shadow v-shadow blur spread color inset

好多的参数啊,依次说下,h-shadow水平阴影(必需) v-shadow垂直阴影(必需) blur模糊距离(可选) spread的尺寸(可选) color阴影颜色(可选) inset内部阴影,这些属性值自己试了才记得快些,就不细说了,最后要提的是inset,加上就是内阴影,不加就是外阴影。

 

文本投影text-shadow text-shadow:h-shadow v-shadow blur color

h-shadow水平阴影(必需) v-shadow垂直阴影(必需) blur模糊距离(可选) color阴影颜色(可选)看起来和box投影一个意思,也没啥可讲的,相信你可以举一反三。

 

背景渐变gradient gradient更确切的是属性值,由于火狐和谷歌写法不同,所以分开来说,规定按钮的背景,那就是background-image:-moz-linear-gradient(center top , #ddd 0%, #D4D4D4 50%, #C5C5C5 50%, #ADADAD 100%);linear-gradient是线性渐变,radial-gradient是径向渐变,我们这里的按钮时用线性的,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角,我写了个center,可以去掉,#ddd 0%这个是起始颜色的意思,#ADADAD 100%结束颜色,中间可以按自己的需求添加各种百分比位置的颜色,我那个50%是指中间部位,第一个50%是前半程的结束颜色,第二个50%是后半程的起始颜色 再看下webkit内核的写法,background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(0.5, #D4D4D4), color-stop(0.5, #C5C5C5), color-stop(1, #ADADAD));linear线性渐变写到了括号里边,然后是一对起始坐标,一对结束坐标,可以用具体数字也可以用关键位置,我用的关键位置代表左上到左下,你得脑海里是不是出现了一条竖着的直线,对了,在往后边的参数看color-stop(0, #ddd)写颜色要用color-stop这个呀,0就是起始,后边是对应的颜色,1代表结束颜色,中间参数可以用0到1之间的小数表示,说了好多呀,求你自己一定要试一试,才能把握好这些看似很多的参数,转下一个样式。

 

 

倒影-webkit-box-reflect -webkit-box-reflect:direction | offset | mask-box-image 你眼睛尖不尖,发现我直接就是-webkit了吗,是呀,这个样式目前只有weibkit内核的浏览器支持,但是好玩的东西,就要玩起来 呀,direction的参数有above:倒影在对象的上边、below:下边、left:左边、right:右边,offset倒影与对象之间的间 隔,可以用像素单位,可以用百分比,可以为负数;懂ps的知道倒影需要遮罩层,mask-box-image就是遮罩层,其可用的参数是;none:无遮 罩图像、url:引用图像作为遮罩、linear-gradient:使用线性渐变创建遮罩图像、radial-gradient:使用径向(放射性)渐 变创建遮罩图像、repeating-linear-gradient:使用重复的线性渐变创建背遮罩像、repeating-radial- gradient:使用重复的径向(放射性)渐变创建遮罩图像,咱不复杂,就用线性渐变就够了,-webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3))这个参数组合你可以直接用的,就是一个遮罩的用处。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。