在css中隐藏按钮的虚线边框

Question

我有一个问题，如图所示：

我怎样才能从那个按钮中删除那个虚线的白色边框（在按钮上聚焦）？

在线资源和 CSS + HTML 代码在这里：http://jsfiddle.net/TY8qV/

HTML：

<div class="mydesign">
<a href="javascript:void(0)">Test</a>
</div>

CSS：

.mydesign{
/*animation*/
-webkit-animation:240s linear 0s alternate none infinite abr;
   -moz-animation:240s linear 0s alternate none infinite abr;
    -ms-animation:240s linear 0s alternate none infinite abr;
     -o-animation:240s linear 0s alternate none infinite abr;
        animation:240s linear 0s alternate none infinite abr;
float:right;
/*box-shadow*/
-webkit-box-shadow:0px 3px 20px #4C4C4C inset;
   -moz-box-shadow:0px 3px 20px #4C4C4C inset;
        box-shadow:0px 3px 20px #4C4C4C inset;
direction:rtl;
height:140px;
background:#000;
width:770px;
}
.mydesign a{
/*animation*/
-webkit-animation:1s linear 0s alternate none infinite shatel;
   -moz-animation:1s linear 0s alternate none infinite shatel;
    -ms-animation:1s linear 0s alternate none infinite shatel;
     -o-animation:1s linear 0s alternate none infinite shatel;
        animation:1s linear 0s alternate none infinite shatel;
position:relative;
color:rgba(255,255,255,1);
text-decoration:none;
background-color:rgba(219,87,5,1);
font-family:yekan;
font-weight:normal;
font-size:2em;
display:block;
padding:5px;
/*border-radius*/
-webkit-border-radius:8px;
   -moz-border-radius:8px;
        border-radius:8px;
/*box-shadow*/
-webkit-box-shadow:0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
   -moz-box-shadow:0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
        box-shadow:0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin:30px auto;
width:560px;
text-align:center;
/*transition*/
-webkit-transition:all .1s ease;
   -moz-transition:all .1s ease;
     -o-transition:all .1s ease;
        transition:all .1s ease;
}
.mydesign a:active{
/*box-shadow*/
-webkit-box-shadow:0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
   -moz-box-shadow:0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
        box-shadow:0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position:relative;
top:6px;
}

Answer 1

“虚线边框”是a 标记的outline 焦点或活动时。

要删除它，请将其添加到您的 CSS：

a:active,
a:focus {
  outline: none;
}

演示 http://jsfiddle.net/TY8qV/1/