如何在基于Web工具包的浏览器中为CSS 3中的按钮制作斜角和嵌入效果？

Question

如何在CSS 3中使用斜角和嵌入效果提交按钮？

像这样.

放大的图像

我只考虑基于Web工具包的浏览器.而且我不是在询问如何给出圆角以及如何给按钮渐变,我只是询问斜角效果

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/