影子拳击：无图像，CSS3，光泽的按钮

CSS3按钮样式：巧用box-shadow打造炫酷按钮效果

本文探讨使用CSS3创建按钮的两种方法：CSS3渐变和box-shadow。虽然CSS3渐变在按钮样式中越来越流行，易于配置且能随按钮区域缩放，但其浏览器支持度有限（主要为Firefox、Chrome和Safari），且语法在不同浏览器之间不一致。

相比之下，利用box-shadow属性叠加颜色层，如同画家叠加颜料，可以创建无图片、可缩放、完全可配置的光滑按钮。这种方法虽然初看起来box-shadow颜色的分层可能比较复杂，但其灵活性更高。

鉴于纯CSS3渐变的支持度对于重要的UI元素来说还不够完善，而基于图像的按钮又缺乏灵活性，因此掌握使用CSS3渐变和box-shadow属性创建按钮的方法对网页设计师来说至关重要。

方法一：box-shadow打造多层效果

我们先从一个基本的扁平橙色按钮开始。以下步骤将逐步演示如何使用box-shadow创建具有光泽感的按钮效果。

步骤1：添加标准阴影

box-shadow的基本语法如下：

box-shadow: X偏移量 Y偏移量 模糊半径 颜色

我们可以叠加多个阴影，用逗号分隔。例如：

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

第一个阴影创建了一个带有20%透明度的黑色阴影，向右下方偏移3像素，模糊半径为6像素。第二个阴影没有偏移，提供一个细微的暗色辉光，让按钮更有质感。

步骤2：添加底层颜色

inset关键字可以反转阴影，使其显示在按钮内部。我们可以使用它来创建底层颜色：

inset 0px 25px 25px #930;

这会在按钮下半部分留下一个柔和的浅橙色区域，模拟光线在玻璃表面的反射效果。

步骤3：添加高光颜色

在按钮上部添加一个更浅的橙色阴影，模糊半径较小，以创建硬边的高光效果：

inset 0px 20px 2px rgba(240, 150, 69, .5)

注意，新的box-shadow会叠加在之前的阴影下方，因此需要将高光颜色放在较暗颜色的前面。

步骤4：调整反射

为了使高光更自然，可以在按钮顶部叠加一层模糊的深橙色阴影：

inset 0px 5px 12px #930

步骤5：添加悬停状态

在鼠标悬停时，可以调整阴影参数，使按钮看起来更立体：

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

浏览器兼容性

此方法在Safari和Chrome中完美运行。Firefox的CSS语法几乎相同，只需将-webkit-box-shadow替换为-moz-box-shadow。Opera和IE9也支持box-shadow，但需删除-webkit-前缀。旧版IE不支持box-shadow。

总结

虽然示例中使用的橙色按钮可能略显俗气，但这种利用box-shadow叠加颜色层的方法非常实用，可以创建出各种炫酷的按钮效果。 与CSS3渐变相比，这种方法具有更好的浏览器兼容性和灵活性。 希望本文能为您的UI设计提供新的思路。

(此处应插入步骤1-5的效果图，但由于无法直接插入图片，请自行根据描述补充图片。图片链接请替换为实际图片链接)

以上是影子拳击：无图像，CSS3，光泽的按钮的详细内容。更多信息请关注PHP中文网其他相关文章！