css - 带有 CSS 的 Facebook 样式按钮

Question

<分区>

Answer 1

使用边框、小填充和 box-shadow: inset 属性，这真的很容易。有一个 JSFiddle demonstrating this here .这不像 Facebook 那样使用额外的 div，尽管我不会触及 Facebook 源代码。为单个墙贴尝试 ~7 个嵌套元素。

这是 CSS:

a {
    -moz-user-select: none;
    background: #2A49A5;
    border: 1px solid #082783;
    box-shadow: 0 1px #4C6BC7 inset;
    color: white;
    padding: 3px 5px;
    text-decoration: none;
    text-shadow: 0 -1px 0 #082783;
    font: 12px Verdana, sans-serif;
}

我添加了一个文本阴影来给人雕刻文本的印象，但您可以将其删除。如果想得到IE中的方框和文字阴影，使用this project让事情顺利进行。