css - 如何为基于 web-kit 的浏览器的 CSS 3 中的按钮制作斜角和浮雕效果？

Question

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

像这样。

放大图像

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

html

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

Answer 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/