如何为基于 webkit 的浏览器的 CSS 3 中的按钮制作斜角和浮雕效果？答案

【问题标题】：How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?如何为基于 webkit 的浏览器的 CSS 3 中的按钮制作斜角和浮雕效果？
【发布时间】：2011-08-10 21:34:07
【问题描述】：

如何在 CSS 3 中为提交按钮制作斜角和浮雕效果？

像这样。

放大图

我只考虑基于 Web-kit 的浏览器。 我不是在问如何给圆角和如何给按钮渐变，我只是在问斜角效果

HTML

<input type="submit" value="Submit your entry" class="input" />

【问题讨论】：

如果没有额外的周围元素可能是不可能的 - 但我可能是错的。有兴趣看看会发生什么。
@pekka - 如果你知道如何通过周围的元素实现这一点，请告诉我。
它应该可以使用带有box-shadow: inset ......的周围元素，创建外部阴影，以及带有渐变等的内部元素，以及普通的box-shadow。不过，这相当复杂，需要大量的摆弄才能看起来不错。
@Pekka - 请在这里尝试jsfiddle.net/vGHXg/1
这里是一个起点：jsfiddle.net/vGHXg/19

标签： css mobile-webkit

【解决方案1】：

通过使用多个盒子阴影，无需使用额外的标记就可以做到这一点：

box-shadow: 
  0 1px 2px #fff, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/

http://jsfiddle.net/NPXfe/

【讨论】：

性感按钮，但您的 cmets 不正确。 “顶部内部高光”和“底部内部阴影”是向后的。对 3 个值的解释也会有所帮助..我试图弄清楚 0 是什么。
固定，0是阴影的x位置（相对于元素）。 css3.info/preview/box-shadow
@Martin 在这种情况下，您始终可以添加一个父元素并将插入框阴影应用到它。
当然，但是那些寻找语义 html 友好的方式来做到这一点的人可能一开始并没有意识到这一点。此外，您的回答意味着只需要这个盒子阴影。
@Martin 所以你的解决方案是......？你可以用伪元素破解你的出路，但这对语义代码来说太过妥协了。