blocks|key|958534|text|现在是老问题了，但这可能与有类似问题的人相关。我有一个四舍五入的border输入域，想要改变焦点轮廓的颜色。我不能驯服输入控件可怕的正方形轮廓。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|958535|因此，我使用了box-shadow。实际上我更喜欢阴影的平滑外观，但阴影可以硬化以模拟圆形轮廓：|958536|​|958537|input,+input:focus+{
++++border:+none;
++++border-radius:+2pt;
++++box-shadow:+0+0+0+1pt+grey;
++++outline:+none;
++++transition:+.1s;
}
/*+Smooth+outline+with+box-shadow:+*/
.text1:focus+{
++++box-shadow:+0+0+3pt+2pt+cornflowerblue;
}

/*+Hard+"outline"+with+box-shadow:+*/
.text2:focus+{
++++box-shadow:+0+0+0+2pt+red;
}|code-block|syntax|javascript|958538|<input+class="text1">+
<br>
<br>
<input+type=text+class="text2">|958539|958540|entityMap^0|W|6|0|7|A|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|10|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|11|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|S|$]]

<p>Old question now, but this might be relevant for somebody with a similar issue. I had an input field with rounded <code>border</code> and wanted to change colour of focus outline. I couldn't tame the horrid square outline to the input control.</p>
<p>So instead, I used <code>box-shadow</code>. I actually preferred the smooth look of the shadow, but the shadow can be hardened to simulate a rounded outline:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline: none;
    transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

/* Hard "outline" with box-shadow: */
.text2:focus {
    box-shadow: 0 0 0 2pt red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input class="text1"&gt; 
&lt;br&gt;
&lt;br&gt;
&lt;input type=text class="text2"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|958605|text|与上面的Lea+Hayes类似，但我是这样做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|958606|​|958607|div+{
++background:+#999;
++height:+100px;
++width:+200px;
++border:+#999+solid+1px;
++border-radius:+10px;
++margin:+15px;
++box-shadow:+0px+0px+0px+1px+#fff+inset;
}|code-block|syntax|javascript|958608|<div></div>|958609|958610|不需要嵌套DIVs或jQuery，尽管为了简洁，我省略了一些CSS的-moz和-webkit变体。你可以看到上面的结果|958611|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Similar to Lea Hayes above, but here's how I did it:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  background: #999;
  height: 100px;
  width: 200px;
  border: #999 solid 1px;
  border-radius: 10px;
  margin: 15px;
  box-shadow: 0px 0px 0px 1px #fff inset;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>No nesting of DIVs or jQuery necessary, Altho for brevity I have left out the -moz and -webkit variants of some of the CSS. You can see the result above</p>


blocks|key|742762|text|我通常使用:after伪元素完成此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|742763|当然，这取决于使用情况，此方法允许控制单个边框，而不是使用硬阴影方法。|742764|您还可以设置-1px偏移，并再次使用背景线性渐变(无边界)来获得不同的效果。|742765|​|742766|body+{
++margin:+20px;
}

a+{
++background:+#999;
++padding:+10px+20px;
++border-radius:+5px;
++text-decoration:+none;
++color:+#fff;
++position:+relative;
++border:+2px+solid+#000;
}

a:after+{
++content:+'';
++display:+block;
++position:+absolute;
++top:+0;
++bottom:+0;
++left:+0;
++right:+0;
++border-radius:+5px;
++border:+2px+solid+#ccc;
}|code-block|syntax|javascript|742767|<a+href="#">Button</a>|742768|742769|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>I usually accomplish this using the :after pseudo-element:</p>

<p>of course it depends on usage, this method allows control over individual borders, rather than using the hard shadow method. </p>

<p>you could also set -1px offsets and use a background linear gradient (no border) for a different effect once again.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  margin: 20px;
}

a {
  background: #999;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  position: relative;
  border: 2px solid #000;
}

a:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 5px;
  border: 2px solid #ccc;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#"&gt;Button&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|742866|text|不是的。边框位于元素的外部和箱型边距区域的内部。轮廓位于元素的内部，框模型填充区域忽略它。它不是为美学而设计的。它只是向设计者展示元素的轮廓。例如，在开发html文档的早期阶段，开发人员可能需要快速识别他们是否已将所有骨架div放在正确的位置。稍后，他们可能需要检查各种按钮和表单是否彼此之间的像素数是正确的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|742867|边界本质上是美学的。与轮廓不同，它们实际上是框模型的一部分，这意味着它们不会与设置为边距0的文本重叠；并且边框的每一边都可以单独设置样式。|742868|如果你想对轮廓应用一个边角半径，我假设你使用它的方式和大多数人使用边框的方式一样。所以，如果你不介意我问，轮廓的什么属性使它在边界上是可取的？|742869|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>No. Borders sit on the outside of the element and on the inside of the box-model margin area. Outlines sit on the inside of the element and the box-model padding area ignores it. It isn't intended for aesthetics. It's just to show the designer the outlines of the elements. In the early stages of developing an html document for example, a developer might need to quickly discern if they have put all of the skeletal divs in the correct place. Later on they may need to check if various buttons and forms are the correct number of pixels apart from each other.</p>

<p>Borders are aesthetic in nature. Unlike outlines they are actually apart of the box-model, which means they do not overlap text set to margin: 0; and each side of the border can be styled individually.</p>

<p>If you're trying to apply a corner radius to outline I assume you are using it the way most people use border. So if you don't mind me asking, what property of outline makes it desirable over border?</p>


blocks|key|742947|text|如果你只需要没有边框的轮廓，有一个解决方案。这不是我的。我从Bootstrap+css文件中获取了if。如果你指定了outline:+1px+auto+certain_color，你会得到一些特定颜色的围绕div的细线。在这种情况下，指定的宽度无关紧要，即使您指定10像素的宽度，无论如何它都会是细线。上述规则中的关键字是"auto“。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|742948|如果你需要圆角和一定宽度的轮廓，你可以在边框上添加css规则，需要的宽度和相同的颜色。它会使轮廓变得更粗。|742949|entityMap^0|1M|V|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

<p>There is the solution if you need only outline without border. It's not mine. I got if from Bootstrap css file. If you specify <code>outline: 1px auto certain_color</code>, you'll get thin outer line around div of certain color. In this case the specified width has no matter, even if you specify 10 px width, anyway it will be thin line. The key word in mentioned rule is "auto".<br>
If you need outline with rounded corners and certain width, you may add css rule on border with needed width and same color. It makes outline thicker.  </p>


blocks|key|743052|text|我刚刚找到了一个很好的解决方案，在看了所有的回复后，我还没有看到它的帖子。所以，这是我所做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|743053|我为该类创建了一个CSS规则，并为该规则使用了伪类:focus。我将outline:+none设置为去掉Chrome默认使用的浅蓝色、非边框半径的“轮廓”。然后，在那个轮廓不再存在的:focus伪类中，我添加了半径和边界属性。导致以下结果|offset|length|style|CODE|743054|outline:+none;
border-radius:+5px;
border:+2px+solid+maroon;|code-block|syntax|javascript|743055|具有栗色轮廓和边框半径，当用户按tab键选择元素时，该轮廓现在会出现。|743056|entityMap^0|0|Y|D|2J|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]|$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

<p>I just found a great solution for this, and after looking at all the responses so far, I haven't seen it posted yet.  So, here's what I did:</p>

<p>I created a CSS Rule for the class and used a pseudo-class of :focus for that rule.  I set <code>outline: none</code> to get rid of that default light-blue non-border-radius-able 'outline' that Chrome uses by default.  Then, in that same <code>:focus</code> pseudo-class, where that outline no longer exists, I added my radius and border properties. Leading to the following</p>

<pre><code>outline: none;
border-radius: 5px;
border: 2px solid maroon;
</code></pre>

<p>to have a maroon-colored outline with a border radius that now appears when the element is tab-selected by the user.</p>


blocks|key|743080|text|我刚刚将outline设置为透明。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|743081|input[type=text]+{
++outline:+rgba(0,+0,+0,+0);
++border-radius:+10px;
}

input[type=text]:focus+{++++
++border-color:+#0079ff;
}|code-block|syntax|javascript|743082|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I just set outline transparent.</p>

<pre><code>input[type=text] {
  outline: rgba(0, 0, 0, 0);
  border-radius: 10px;
}

input[type=text]:focus {    
  border-color: #0079ff;
}
</code></pre>


blocks|key|959022|text|我希望Bootstrap导航栏中的下拉菜单具有良好的焦点可访问性，并且对此非常满意：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|959023|​|959024|+++++a.dropdown-toggle:focus+{
+++++++++display:+inline-block;
+++++++++box-shadow:+0+0+0+2px+#88b8ff;
+++++++++border-radius:+2px;
+++++}|code-block|syntax|javascript|959025|<a+href="https://stackoverflow.com"+class="dropdown-toggle">Visit+Stackoverflow</a>|959026|959027|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>I wanted some nice focus accessibility for dropdown menus in a Bootstrap navbar, and was pretty happy with this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>     a.dropdown-toggle:focus {
         display: inline-block;
         box-shadow: 0 0 0 2px #88b8ff;
         border-radius: 2px;
     }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="https://stackoverflow.com" class="dropdown-toggle"&gt;Visit Stackoverflow&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|743191|text|尝试对边框使用填充和背景色，然后对轮廓使用边框：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|743192|.round_outline+{
++padding:+8px;
++background-color:+white;
++border-radius:+50%25;
++border:+1px+solid+black;
}|code-block|syntax|javascript|743193|在我的案例中起作用了。|743194|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Try using padding and a background color for the border, then a border for the outline:</p>

<pre><code>.round_outline {
  padding: 8px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
}
</code></pre>

<p>Worked in my case.</p>


blocks|key|959153|text|组合长方体阴影和轮廓。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|959154|我发现了一个对Lea+Hayes答案的轻微扭曲|offset|length|959155|input[type=text]:focus+{
++++box-shadow:+0+0+0+1pt+red;
++++outline-width:+1px;
++++outline-color:+red;
}|code-block|syntax|javascript|959156|得到了一个非常漂亮的干净的结尾。使用边界半径时，不会出现大小跳跃|959157|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/5394116/outline-radius/52254673#52254673^0|0|7|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<h3>COMBINING BOX SHADOW AND OUTLINE.</h3>

<p>A slight twist on <a href="https://stackoverflow.com/questions/5394116/outline-radius/52254673#52254673">Lea Hayes</a> answer
I found </p>

<pre><code>input[type=text]:focus {
    box-shadow: 0 0 0 1pt red;
    outline-width: 1px;
    outline-color: red;
}
</code></pre>

<p>gets a really nice clean finish. No jumping in size which you get when using border-radius</p>


blocks|key|959209|text|我喜欢这种方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|959210|.circle:before+{
+++content:+"";
+++width:+14px;
+++height:+14px;
+++border:+3px+solid+#fff;
+++background-color:+#ced4da;
+++border-radius:+7px;
+++display:+inline-block;
+++margin-bottom:+-2px;
+++margin-right:+7px;
+++box-shadow:+0px+0px+0px+1px+#ced4da;
}|code-block|syntax|javascript|959211|它将创建一个灰色的圆圈，周围有智慧的边框，再一次是1px的边框！|959212|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I like this way.</p>

<pre><code>.circle:before {
   content: "";
   width: 14px;
   height: 14px;
   border: 3px solid #fff;
   background-color: #ced4da;
   border-radius: 7px;
   display: inline-block;
   margin-bottom: -2px;
   margin-right: 7px;
   box-shadow: 0px 0px 0px 1px #ced4da;
}
</code></pre>

<p>It will create gray circle with wit border around it and again 1px around border!</p>


blocks|key|959240|text|clip-path:+circle(100px+at+center);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|959241|这实际上将使单击仅为圆形，而边框半径仍然是正方形，但看起来是圆形。|unstyled|959242|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>clip-path: circle(100px at center);
</code></pre>

<p>This will actually make clickable only circle, while border-radius still makes a square, but looks as circle.</p>


blocks|key|959279|text|我们可能很快就会看到我们的愿望，通过设置outline-style:+auto它在WebKits雷达上：http://trac.webkit.org/changeset/198062/webkit|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|959280|2030年再见。|959281|entityMap|0|LINK|mutability|MUTABLE|url|http://trac.webkit.org/changeset/198062/webkit^0|K|J|1G|1A|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>We may see our wishes soonish by setting <code>outline-style: auto</code> It's on WebKits radar: <a href="http://trac.webkit.org/changeset/198062/webkit" rel="noreferrer">http://trac.webkit.org/changeset/198062/webkit</a></p>

<p>See ya in 2030.</p>


blocks|key|959316|text|正如其他人所说，只有firefox支持这一点。这里有一个变通方法，可以做同样的事情，甚至可以处理虚线轮廓。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|959317|​|959318|📷|atomic|offset|length|959319|959320|959321|.has-outline+{
++++display:+inline-block;
++++background:+#51ab9f;
++++border-radius:+10px;
++++padding:+5px;
++++position:+relative;
}
.has-outline:after+{
++border-radius:+10px;
++padding:+5px;
++border:+2px+dashed+#9dd5cf;
++position:+absolute;
++content:+'';
++top:+-2px;
++left:+-2px;
++bottom:+-2px;
++right:+-2px;
}|code-block|syntax|javascript|959322|<div+class="has-outline">
++I+can+haz+outline
</div>|959323|959324|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/47c2d0b26311fd2eacd679b800369d59.png|imageAlt^0|0|0|0|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@$G|14|H|15|1|16]]|A|$]]|$1|I|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|19|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|M|7|1A|8|@]|9|@]|A|$N|O]]|$1|R|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]]]

<p>As others have said, only firefox supports this. Here is a work around that does the same thing, and even works with dashed outlines. </p>

<p><a href="https://i.stack.imgur.com/f91dA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f91dA.png" alt="example"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.has-outline {
    display: inline-block;
    background: #51ab9f;
    border-radius: 10px;
    padding: 5px;
    position: relative;
}
.has-outline:after {
  border-radius: 10px;
  padding: 5px;
  border: 2px dashed #9dd5cf;
  position: absolute;
  content: '';
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="has-outline"&gt;
  I can haz outline
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|743442|text|使用这个：box-shadow:+0px+0px+0px+1px+red;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|743443|entityMap^0|5|W|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Use this one:
<code>box-shadow: 0px 0px 0px 1px red;</code></p>


blocks|key|959422|text|我正在制作定制的单选按钮，我发现的最好的可定制方法是使用如下的伪元素：Codepen|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|959423|​|959424|/*CSS+is+compiled+from+SCSS*/

.product-colors+{
++margin-bottom:+1em;
++display:+flex;
++align-items:+center;
}
.product-colors+label+{
++position:+relative;
++width:+2.1em;
++height:+2.1em;
++margin-right:+0.8em;
++cursor:+pointer;
}
.product-colors+label:before+{
++opacity:+0;
++width:+inherit;
++height:+inherit;
++padding:+2px;
++border:+2px+solid+red;
++border-radius:+0.2em;
++content:+"";
++position:+absolute;
++z-index:+1;
++background:+transparent;
++top:+-4px;
++left:+-4px;
}
.product-colors+input+{
++position:+absolute;
++opacity:+0;
++width:+0;
++height:+0;
}
.product-colors+input:checked+%2B+label:before,+.product-colors+input:focus+%2B+label:before+{
++opacity:+1;
}|code-block|syntax|javascript|959425|<div+class="product-colors">
++<input+type="radio"+name="cs"+id="cs1"+value="black">
++<label+for="cs1"+style="background:black"></label>
++<input+type="radio"+name="cs"+id="cs2"+value="green">
++<label+for="cs2"+style="background:green"></label>
++<input+type="radio"+name="cs"+id="cs3"+value="blue">
++<label+for="cs3"+style="background:blue"></label>
++<input+type="radio"+name="cs"+id="cs4"+value="yellow">
++<label+for="cs4"+style="background:yellow"></label>
</div>|959426|959427|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/hmz777/pen/yLVdzLL^0|Z|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>I was making custom radio buttons and the best customisable way i've found is using pseudo elements like this: <a href="https://codepen.io/hmz777/pen/yLVdzLL" rel="nofollow noreferrer">Codepen</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*CSS is compiled from SCSS*/

.product-colors {
  margin-bottom: 1em;
  display: flex;
  align-items: center;
}
.product-colors label {
  position: relative;
  width: 2.1em;
  height: 2.1em;
  margin-right: 0.8em;
  cursor: pointer;
}
.product-colors label:before {
  opacity: 0;
  width: inherit;
  height: inherit;
  padding: 2px;
  border: 2px solid red;
  border-radius: 0.2em;
  content: "";
  position: absolute;
  z-index: 1;
  background: transparent;
  top: -4px;
  left: -4px;
}
.product-colors input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.product-colors input:checked + label:before, .product-colors input:focus + label:before {
  opacity: 1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="product-colors"&gt;
  &lt;input type="radio" name="cs" id="cs1" value="black"&gt;
  &lt;label for="cs1" style="background:black"&gt;&lt;/label&gt;
  &lt;input type="radio" name="cs" id="cs2" value="green"&gt;
  &lt;label for="cs2" style="background:green"&gt;&lt;/label&gt;
  &lt;input type="radio" name="cs" id="cs3" value="blue"&gt;
  &lt;label for="cs3" style="background:blue"&gt;&lt;/label&gt;
  &lt;input type="radio" name="cs" id="cs4" value="yellow"&gt;
  &lt;label for="cs4" style="background:yellow"&gt;&lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|959502|text|铬94.0%2B|type|unstyled|depth|inlineStyleRanges|entityRanges|data|959503|我在chrome+94.0中测试了它，似乎outline属性现在支持边界半径。|959504|​|959505|📷|atomic|offset|length|959506|959507|959508|.outline+{
++outline:+2px+solid+red;
}

.border+{
++border:+2px+solid+red;
}

.outline-10+{
++border-radius:+10px;
}

.border-2+{
++border-radius:+2px;
}

.outline-2+{
++border-radius:+2px;
}

.border-10+{
++border-radius:+10px;
}

.outline-50+{
++border-radius:+50%25;
}

.border-50+{
++border-radius:+50%25;
}

.circle+{
++display:+inline-block;+
++width:50px;+
++height:+50px;
}|code-block|syntax|javascript|959509|<strong>Test+this+in+chrome+94.0%2B</strong>
<br/><br/>
border-radius:+2px
<span+class="outline+outline-2">outline</span>
<span+class="border+border-2">border</span>
<br/><br/>
border-radius:+10px
<span+class="outline+outline-10">outline</span>
<span+class="border+border-10">border</span>
<br/><br/>
border-radius:+50%25
<span+class="outline+outline-50">outline</span>
<span+class="border+border-50">border</span>
<span+class="outline+circle+outline-50">outline</span>
<span+class="border+circle+border-50">border</span>|959510|959511|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/f1eabbedaabc6a2e65054f499389b061.png|imageAlt^0|0|0|0|0|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|16|8|@]|9|@$I|17|J|18|1|19]]|A|$]]|$1|K|3|E|5|6|7|1A|8|@]|9|@]|A|$]]|$1|L|3|E|5|6|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1C|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|O|7|1D|8|@]|9|@]|A|$P|Q]]|$1|T|3|E|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11|12|-4]]]]

<h2>Chrome 94.0+</h2>
I tested it in chrome 94.0 and it seems that the outline property honors the border-radius now. 
<p><a href="https://i.stack.imgur.com/PsFsS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PsFsS.png" alt="enter image description here" /></a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.outline {
  outline: 2px solid red;
}

.border {
  border: 2px solid red;
}

.outline-10 {
  border-radius: 10px;
}

.border-2 {
  border-radius: 2px;
}

.outline-2 {
  border-radius: 2px;
}

.border-10 {
  border-radius: 10px;
}

.outline-50 {
  border-radius: 50%;
}

.border-50 {
  border-radius: 50%;
}

.circle {
  display: inline-block; 
  width:50px; 
  height: 50px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;strong&gt;Test this in chrome 94.0+&lt;/strong&gt;
&lt;br/&gt;&lt;br/&gt;
border-radius: 2px
&lt;span class="outline outline-2"&gt;outline&lt;/span&gt;
&lt;span class="border border-2"&gt;border&lt;/span&gt;
&lt;br/&gt;&lt;br/&gt;
border-radius: 10px
&lt;span class="outline outline-10"&gt;outline&lt;/span&gt;
&lt;span class="border border-10"&gt;border&lt;/span&gt;
&lt;br/&gt;&lt;br/&gt;
border-radius: 50%
&lt;span class="outline outline-50"&gt;outline&lt;/span&gt;
&lt;span class="border border-50"&gt;border&lt;/span&gt;
&lt;span class="outline circle outline-50"&gt;outline&lt;/span&gt;
&lt;span class="border circle border-50"&gt;border&lt;/span&gt;</code></pre>
</div>
</div>
</p>


<p>Is there any way of getting rounded corners on the outline of a <code>div</code> element, similar to <code>border-radius</code>?</p>


Outline radius?

jQuery

有没有办法在类似于border-radius的div元素的轮廓上获得圆角

问轮廓半径？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问轮廓半径？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问轮廓半径？
EN