Question

这是我想用CSS制作的按钮

button http://gyazo.com/e6df392f64d28b0a7e88cb80c946bc30.png

忽略灰色背景

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

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

这可能吗？

谢谢。

Answer 1

想出这样的smth。尝试使用颜色和字体来获得所需

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

P.S。工作expm - http://jsfiddle.net/6zhDt/

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

Answer 2

您可以通过before: after: 伪类获得所需的结果多边框，请参阅演示： -

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

Answer 3

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

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

3 个答案: