有两个边界的圈子 [英] Circle with two borders

问题描述

如何使用两个边框响应地定义一个圆形（ div ），以便对容器的大小做出反应？

How can I style a a circle (a div) with two borders responsively so that it reacts to a container's size?

假设像这样的圈子：

这是一个圆圈的工作CSS：

Here is a working CSS for a circle:

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  border: 1px solid green;
  background: pink;
}

<div class="circle"></div>

两种颜色的边框？我试过大纲，但它出来作为一个矩形。

How can I add a border with two colors? I tried outline but it came out as a rectangle. I tried to place another div inside the circle div and use background color but I can't align the inner div vertically.

推荐答案

我想要在圆div内放置另一个div并使用背景颜色，我建议使用以下HTML：

I'd suggest, with the following HTML:

<div></div>

CSS：

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px red;
}

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}

<div></div>

JS Fiddle演示。

box-shadow 给出最外面的颜色环， border 给出了白色的内部边界。

The box-shadow gives the outermost ring of colour, the border gives the white 'inner-border'.

或者，您可以使用 box-shadow 与插入关键字，并使用框-shadow 生成'内部边界'并使用 border 作为最外边框：

Alternatively, you can use a box-shadow with the inset keyword, and use the box-shadow to generate the 'inner-border' and use the border as the outermost border:

div {
    width: 20em;
    height: 20em;
    border-radius: 50%;
    background-color: red;
    border: 4px solid red;
    box-shadow: inset 0 0 0 5px white;
}

div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid red;
  box-shadow: inset 0 0 0 5px white;
}

<div></div>

JS Fiddle demo 。

显然，根据自己的口味调整尺寸，

Obviously, adjust the dimensions to your own taste and circumstances.

但是，使用 box-shadow 生成最外边框允许多个边框和白色）：

Using the box-shadow to generate the outermost border, however, allows for multiple borders (alternating red and white in the following example):

div {
    width: 20em;
    height: 20em;
    margin: 20px;
    border-radius: 50%;
    background-color: red;
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
}

div {
  width: 20em;
  height: 20em;
  margin: 20px;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
}

<div></div>

JS Fiddle演示。

这篇关于有两个边界的圈子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！