如何在CSS 3中为基于Web套件的浏览器制作斜角和Embested效果按钮? [英] How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?
本文介绍了如何在CSS 3中为基于Web套件的浏览器制作斜角和Embested效果按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在CSS 3中提交按钮?
How to make bevel and Embosed effect to Submit button in CSS 3 ?
像这样。
放大图片>
我只考虑基于Web-kit 的浏览器。和我不是问如何给圆角和如何给按钮渐变,我只是问斜角效果
I'm only considering Web-kit based 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
Html
<input type="submit" value="Submit your entry" class="input" />
推荐答案
这可以不使用额外的标记通过使用多个框阴影:
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*/
这篇关于如何在CSS 3中为基于Web套件的浏览器制作斜角和Embested效果按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文