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

发布于 2024-11-02 17:28:24 字数 419 浏览 1 评论 0原文

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

像这样。

在此处输入图像描述

放大图像在此处输入图像描述

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

Html

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

原文

How to make bevel and Embosed effect to Submit button in CSS 3 ?

Like this.

enter image description here

Enlarged Image enter image description here

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

快乐很简单 2024-11-09 17:28:24

通过使用多个框阴影，无需使用额外标记即可实现此目的：

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/

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

enter image description here

http://jsfiddle.net/NPXfe/

回复收藏 0 原文

~没有更多了~