练习使用css3实现3d按钮

网上有很多漂亮的用css3实现的3d按钮，如'这个'、‘糖果色按钮’，

今天练习了一下，喏，下面这样，兼容性不好。

小黑子 小虎子

3d效果和发光效果都是利用box-shadow，也经常利用伪元素:after和:before为目标元素添加别的效果。box-shadow是可以叠加的，所以可以为一个元素设置多个阴影，上图中蓝色按钮的右阴影如果直接box-shadow:4px 2px 0 rgb(17, 134, 167);效果是下图：

 

阴影上边界是水平的，我们需要的是斜的，解决方法就是：写多个右阴影，每个阴影的y值依次增大，如

box-shadow:1px 1px 0 rgb(17, 134, 167),2px 2px 0 rgb(17, 134, 167),3px 3px 0 rgb(17, 134, 167),4px 4px 0 rgb(17, 134, 167);

效果如下图：

 

另外按钮上的字有一点点刻在按钮上的感觉是利用文字的text-shadow（颜色值为比按钮颜色深一点）实现的，而点击上去按钮被按下的效果是利用a:hover实现的，按下时按钮向下移动是利用transform:translate(0,4px);实现的。顺便复习下a标签的‘爱恨’原则（LoVeHAte，需按此顺序写相应的css样式）：

a:link，定义正常链接的样式；
a:visited，定义已访问过链接的样式；
a:hover，定义鼠标悬浮在链接上时的样式；
a:active，定义鼠标点击链接时的样式。

补充：看到了神飞的‘一些上流的CSS3图片样式’，（译自：CSS3 Image Styles）里面有利用box-shadow实现的各种不同的效果。其中有一种是实现了下图这样的浮雕效果：

看到这个效果还奇怪：怎么box-shadow不仅可以填充颜色值，还可以填图片？看了一下才明白原来下面的那个阴影其实是给图片元素添加了一个inset、-y值的半透明阴影和一个inset、更小-y值的白色线条小阴影。

转载于:https://www.cnblogs.com/yigeqi/p/4000458.html