0

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

按钮
（来源：gyazo.com）

忽略灰色背景

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

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

那可能吗？

谢谢你。

4

3 回答 3

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);
}​

ps 工作 expm - http://jsfiddle.net/6zhDt/

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

于 2012-11-02T11:19:57.740 回答
0

您可以通过伪类实现您想要的结果多边框查看演示：-before: after:

演示

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;
}
于 2012-11-02T11:20:31.683 回答
0

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

于 2012-11-02T11:25:23.350 回答