怎样用一个标签制作多边框的按钮？

最近在看css 的面试题，发现了一个很有趣的题目，如下图

看到这个面试题的时候，首先我们要考虑以下几个问题：

1.如何处理按钮多边框？

2.如何设置按钮背景效果？

3.如何显示两个五角星效果？

4.如何给字体增加效果？

解决：1.多边框 box-shadow

先介绍一下CSS Box Shadow 的语法

box-shadow: 
      [horizontal offset] [vertical offset] [blur radius] 
      [spread radius] [color] [inset];

说明：

• h-shadow 必需。水平阴影的位置。允许负值。
• v-shadow 必需。垂直阴影的位置。允许负值。
• blur 可选。模糊距离。默认值为0。
• spread 可选。阴影的尺寸。默认值为0。若为正值，则比自身大，负值则比自身小。
• color 可选。阴影的颜色。
• inset 可选。将外部阴影 (outset) 改为内部阴影。值为inset

例如，我们写如下的代码

.shadow {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 3px 3px 5px 6px #ccc;
}

其效果如下

有意思的是，Box Shadow支持多个值,值之间用,分隔。也就是说，一个元素上可以有任意多个阴影。如果我们只设置阴影的水平和垂直偏移量，不设置模糊距离（默认为0，即不模糊），则可以达到用Box Shadow拷贝自身的目的，然而如果我们不设置阴影的水平和垂直偏移量和模糊距离，只设置阴影尺寸就可以达到多边框的目的。

具体代码如下：

 box-shadow: 0 0 5px 6px #ccc, 0 0 0 8px #fff, 0 0 0 10px #888;

2.渐变背景 linear-gradient

先介绍一下CSS linear gradient的语法

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-o-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

参数：linear-gradient 有三个参数。第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角，同时，如果你也可以通过用角度值指定渐变的方向。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

background-image: linear-gradient(180deg, #fff, #333);
或
background-image: linear-gradient(top, #fff, #333);

除了起始位置和角度，你应该指定起止颜色。起止颜色是沿着渐变线，将会在指定位置（以百分比或长度设定）含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置，0％代表起点和100％是终点，但区域外的值可以被用来达到预期的效果。

我们为了实现按钮的线性渐变效果 ，最终代码如下。

background-image: -webkit-linear-gradient(#e2e2e2 40%, #c4c4c4 65%, #b1b1b1);
background-image: -o-linear-gradient(#e2e2e2 40%, #c4c4c4 65%, #b1b1b1);
background-image: linear-gradient(#e2e2e2 40%, #c4c4c4 65%, #b1b1b1);

3.五角星图标

这里我们用的是Unicode和两个伪类元素（before,after）来显示按钮中的五角星。

具体代码如下：

a:after,
a:before{
    content: '★';
    color:#878686;
    text-shadow:0 0 3px #eeefff;
}
a:after{margin-left: 20px;}
a:before{margin-right: 20px;}

4.字体效果 text-shadow

为了增加按钮的效果我们给字体加上text-shadow的属性。

先介绍一下CSS text shadow的语法

text-shadow: h-shadow v-shadow blur color;

说明：

• h-shadow 必需。水平阴影的位置。允许负值。
• v-shadow 必需。垂直阴影的位置。允许负值。
• blur 可选。模糊距离。默认值为0。
• color 可选。阴影的颜色。

具体代码如下：

text-shadow:0 0 3px #dadbdf;

最后我们的综合css 代码是

@font-face
{
    font-family: myFirstFont;
    src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')
}
a{
    border: 2px solid #6e6e6c;
    border-radius: 5px;
    box-shadow: 0 0 5px 6px #ccc, 0 0 0 8px #fff, 0 0 0 10px #888;
    display: block;
    font-size: 22px;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    margin: 100px auto;
    padding: 0;
    text-transform: uppercase;
    width: 250px;
    font-family: myFirstFont;
    background-image: -webkit-linear-gradient(#e2e2e2 40%, #c4c4c4 65%, #b1b1b1);
    background-image: -o-linear-gradient(#e2e2e2 40%, #c4c4c4 65%, #b1b1b1);
    background-image: linear-gradient(#e2e2e2 40%, #c4c4c4 65%, #b1b1b1);
    letter-spacing: 1px;
    display: block;
    text-decoration: none;
    text-align: center;
    color: #545455;
    text-shadow:0 0 3px #dadbdf;
}
a:after,
a:before{
    content: '★';
    color:#878686;
    text-shadow:0 0 3px #eeefff;
}
a:after{margin-left: 20px;}
a:before{margin-right: 20px;}

因为时间关系没有做详细的尺寸和颜色测量，所以跟原图要求还是有些许差距，最后具体表现效果为