Question

我想在我的橙色圆圈上画一个笔划，我尝试使用div，并给它一个1px＃000000的边框，但我不是很有效。

请注意圆圈是完美的圆形，它只是jsfiddle，它没有字体真棒;）

这是我的代码的jsfiddle。

HTML

<div class="button-circle">
   <a href="pages/solutions.html" class="btn btn-circle page-scroll">
      <i class="fa fa-lock animated"></i>
   </a>
</div>

CSS

.btn-circle {
   width: 70px;
   height: 70px;
   margin-top: 15px;
   padding: 10px 16px;
   border: 3px solid #FC6B0A;
   -webkit-text-stroke: 1px #000000;
   border-radius: 100%!important;
   font-size: 40px;
   color: #FC6B0A;
   background: 0 0;
   -webkit-transition: background .3s ease-in-out;
   -moz-transition: background .3s ease-in-out;
   transition: background .3s ease-in-out;
}

.btn-circle:hover,
.btn-circle:focus {
   outline: 0;
   border: 3px solid #FC580C;
   color: #FC580C;
   stroke: 1px solid #000000;
   background: rgba(192, 192, 192,.6);
}

https://jsfiddle.net/11gb266r/

修改1

好吧，我想我还不够清楚。我的橙色圆圈里面是一个字体真棒锁图标。锁定图标具有文本笔划＆＃39; -webkit-text-stroke：1px＃000000;＆＃39;它为图标提供1px宽的黑色笔触。但我希望实际的圆圈也有1px黑色边框/笔划，

Answer 1

您可以使用内嵌text-shadow在图标周围描边。

body {
    background-color: #eee;
}

.fa {
  color: white;
  text-shadow: -1px 0 #000,
                0 1px #000,
                1px 0 #000,
                0 -1px #000;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa fa-lock"></span>

btn上的笔触或边框颜色

1 个答案: