是否可以制作带有多个边框和投影的按钮？

这是按钮即时通讯寻求做与CSS是否可以制作带有多个边框和投影的按钮？

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

忽略灰色背景

我已经试过裁剪中心和添加边框上，左，右，但看起来还是怪怪的。关于如何在CSS中创建它的任何想法？

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

这可能吗？

谢谢。

来源

2012-11-02 user1761494

什么浏览器（S），你定位？是http://thoughtbot.github.com/bourbon/#buttons你想要什么？ – Maz

最好有一个去吧，张贴您的CSS/HTML，然后社区可以尝试和帮助。 –

即时通讯寻找所有的浏览器和IE9 +，正如我所说我不知道如何创建它们，我问的是多个边框是可能的 – user1761494

想到这样的水手。尝试使用颜色和字体来获得你需要的东西

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. Working expm - http://jsfiddle.net/6zhDt/

p.p.s.如果你想了解更多信息 - http://vimeo.com/31719130辉煌的Lea Verou从大约十分钟的时间开始讨论多边界的阴影。

来源

2012-11-02 11:19:57

这样做，谢谢！ – user1761494

你可以达到你想要的结果多国界通过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; 
}

来源

2012-11-02 11:20:31

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

来源

2012-11-02 11:25:23

尽管此链接可能回答此问题，但最好在此处包含答案的重要部分并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 – Kjuly

@Kjuly你的意思是像OP的网站那样的链接？小提琴也不是无敌的。也许你想建议禁止所有链接？ OP甚至不知道是否可能有多个边界，并且显然没有对这个主题进行任何研究（使用谷歌搜索“CSS多边界”在＃1调出CSSTricks链接）。 – cimmanon

嗨@cimmanon，这个评论是由系统自动生成的，当我回顾这个答案为低质量帖子（某人或系统可能会标记此答案）。这就是所制定的。你可以看看[这个QA]（http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers）。希望这能解决你的疑问。谢谢。 :) – Kjuly

是否可以制作带有多个边框和投影的按钮？

回答

相关问题