使用纯 CSS 设计3D按钮(2)

lia:active规则之外，所有样式都使用 border-style: outset规则，div#buttonAlia:active使用 border-style:inset规则。这样就使按钮状态有一个凸起的外观——当然要将按钮被点击时的情况除外，在按钮被点击时它呈现被按下的状态。

不同的浏览器呈现 inset 和 outset 边界的方式有很大的不同。Internet Explorer 创建更加精细的效果，在每个边界的内边缘有一个加亮区，在外边缘有一个阴影区。而另一方面，Netscape 则以固定的颜色呈现每个边界，这样就产生一个比较有突边的，不怎么圆滑的外观效果。

使用 inset/outset 边界样式是模拟3D效果的一种简单快捷的方法。然而，这不是唯一的方法。如果你不喜欢标准的效果，或者你为浏览器在表现方式上的差别而困扰，那么你可以自己控制边界的颜色来产生你想要的效果。

除了使用能border-style 的 inset/outset 属性以及让浏览器处理每个边界的实际颜色之外，你还可以使用自己的样式规则为每个边界单独设置颜色。

在前面的文章中我已经讲到过创建 CSS 按钮的方法，所以我将只挑要点部分解释。

div#buttonAul规则设置常规文本的尺寸和间距，div#buttonAli规则去除列表项的默认项目符号（list-style-type: none）并设置按钮框的尺寸。div#buttonAli a规则使整个按钮可点击（height: 100%; width: 100%; display: block;），它还是设置边界宽度的一个很方便的地方。

样式的其余部分控制不同按钮状态的外观变化。所有伪类（:link、:visited、:hover、:active）都有一个 color、font-weight、background-color 和 border-style 规则。除div#buttonAlia:active规则之外，所有样式都使用 border-style: outset规则，div#buttonAlia:active使用 border-style:inset规则。这样就使按钮状态有一个凸起的外观——当然要将按钮被点击时的情况除外，在按钮被点击时它呈现被按下的状态。

不同的浏览器呈现 inset 和 outset 边界的方式有很大的不同。Internet Explorer 创建更加精细的效果，在每个边界的内边缘有一个加亮区，在外边缘有一个阴影区。而另一方面，Netscape 则以固定的颜色呈现每个边界，这样就产生一个比较有突边的，不怎么圆滑的外观效果。

使用 inset/outset 边界样式是模拟3D效果的一种简单快捷的方法。然而，这不是唯一的方法。如果你不喜欢标准的效果，或者你为浏览器在表现方式上的差别而困扰，那么你可以自己控制边界的颜色来产生你想要的效果。

除了使用能border-style 的 inset/outset 属性以及让浏览器处理每个边界的实际颜色之外，你还可以使用自己的样式规则为每个边界单独设置颜色。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有