是否可以制作具有多个边框和阴影的按钮？答案

【问题标题】：Is it possible to make a button with multiple borders and drop shadow?是否可以制作具有多个边框和阴影的按钮？
【发布时间】：2012-10-23 01:00:22
【问题描述】：

这是我希望用 CSS 制作的按钮

_{（来源：gyazo.com）}

忽略灰色背景

我尝试裁剪中心并添加边框顶部、左侧、右侧，但看起来仍然很奇怪。关于如何仅在 CSS 中创建它的任何想法？

它有一个白色的阴影，实时预览：http://justxp.plutohost.net/themetheory/portfolio.html

这可能吗？

谢谢。

【问题讨论】：

您的目标浏览器是什么？ thoughtbot.github.com/bourbon/#buttons是你想要的吗？
最好尝试一下，发布您的 css/html，然后社区可以尝试提供帮助。
我正在寻找所有浏览器和 IE9+，正如我所说我不知道如何创建它们，我问的是多个边框是可能的

标签： css button styles

【解决方案1】：

想出了这样的东西。尝试颜色和字体以获得所需的内容

a {
  display:block;
  width:200px;
  height:40px;
  background:#5a81ff;
  color:#fff;
  font-size:1.5em;
  text-align:center;
  text-decoration:none;
  border:1px solid #656565;
  border-top-color:#cacaca;
  line-height:40px;    

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  -webkit-box-shadow: 0px 2px 0px rgba(176, 176, 176, 1);
  -moz-box-shadow:    0px 2px 0px rgba(176, 176, 176, 1);
  box-shadow:         0px 2px 0px rgba(176, 176, 176, 1);
}

附言工作经验 - http://jsfiddle.net/6zhDt/

p.p.s.如果您想了解更多信息 - http://vimeo.com/31719130 Brilliant Lea Verou 从大约第 10 分钟开始谈论带有阴影的多个边界。

【讨论】：

【解决方案2】：

你可以通过before: after:伪类实现你想要的结果Multiple Borders：-

DEMO

HTML

<div id="borders"></div>

CSS

#borders {
   position: relative;
   border: 5px solid #f00;
   width:100px;
   height:100px;
}
#borders:before {
   content: " ";
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   border: 5px solid #ffea00;
}
#borders:after {
   content: " ";
   position: absolute;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid green;
}

【讨论】：

【解决方案3】：

CSSTricks.com 上有一篇博文 - http://css-tricks.com/snippets/css/multiple-borders/

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
@Kjuly 您是指像 OP 网站这样的链接吗？小提琴也不是无敌的。也许您想建议一起禁止链接？ OP 甚至不知道是否有多个边框，并且显然没有对该主题进行任何研究（谷歌搜索“css 多个边框”会在 #1 处找到 CSSTricks 链接）。
嗨@cimmanon，当我将此答案视为低质量帖子（某人或系统可能会标记此答案）时，系统会自动生成此评论。这就是 SO 制定的。你可以看看THIS QA。希望这能解决你的疑问。谢谢。 :)