如何在基于 web-kit 的浏览器的 CSS 3 中为按钮制作斜角和浮雕效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5754439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?
提问by Jitendra Vyas
How to make bevel and Embosed effect to Submitbutton in CSS 3 ?
如何在 CSS 3 中为提交按钮制作斜角和浮雕效果？
Like this.
像这样。
Enlarged Image
放大图
I'm only considering Web-kitbased browsers. and I'm not asking about How to give round corner and how to give gradient to button, I'm only asking about bevel effect
我只考虑基于Web-kit的浏览器。而我不问如何给圆角以及如何给予梯度按钮，我只问斜角效果
Html
html
<input type="submit" value="Submit your entry" class="input" />
回答by methodofaction
This is possible without the use of extra mark-up through the use of multiple box-shadows:
通过使用多个框阴影，无需使用额外的标记即可实现这一点：
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*/
