Question

如何定位内边框，使其看起来像这样。

我的内部边框div包含边框样式：虚线;

＆＃13;

.container {
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.border {
  background: white;
  border-radius: 50%;
  height: 300px;
}

.innerborder {
  border-style: dashed;
  height: 200px;
  border-radius: 50%;
}

＆＃13;

<body style="background: black;">
  <div class="container">
    <div class="border">
      <div class="innerborder">
      </div>
    </div>
  </div>
</body>

＆＃13;

我尝试的CSS似乎没有产生与图片相关的输出。有没有其他方法来实现这个使用CSS？请帮忙。

Answer 1

像这样，

将box-sizing:border-box和width:100%以及height:100%用于内部div

＆＃13;

*{
  box-sizing:border-box;
}
.container {
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.border {
  background: white;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  padding:5px;
  margin: 0 auto;
}


.innerborder {
  border-style: dashed;
  height: 100%;
  width:100%;
  border-radius: 50%;
}

＆＃13;

<body style="background: black;">
  <div class="container">
    <div class="border">
      <div class="innerborder">
      </div>
    </div>
  </div>
</body>

＆＃13;

Answer 2

你可以用绝对定位来做到这一点。像这样：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>
<style media="screen">
  .container {
    max-width: 980px;
    height: auto;
    margin: 0 auto;
    width: 100%;
  }
  
  .border {
    background: white;
    border-radius: 50%;
    height: 300px;
    position: relative;
  }
  
  .border:before {
    position: absolute;
    content: '';   
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    border: 2px solid #555;
    border-style: dashed;
    border-radius:50%;
  }
</style>

<body style="background: black;">

  <div class="container">
    <div class="border">
    </div>

  </div>
</body>

</html>

Answer 3

我建议您使用pseudo selector :before并在dashed border内创建.container，如下所示，

＆＃13;

body{
  background:#111;
}
.container{
  width:400px;
  height:400px;
  border-radius:50%;
  background:#fff;
  margin:auto;
  position:relative;
}
.container:before{
  content:"";
  width:380px;
  height:380px;
  position:absolute;
  border:1px dashed #111;
  border-radius:50%;
  top:9px;
  left:9px;
}

＆＃13;

<div class="container">
</div>

＆＃13;

即使您的代码工作正常，只需添加padding to .border并减少.inner-border的高度，我已更改.container to 400px的高度以使其进入正确的圆圈。

＆＃13;

.container {
  height: 400px;
  margin: 0 auto;
  width: 400px;
}

.border {
  background: white;
  border-radius: 50%;
  height: 365px;
  width:380px;
  padding:10px;
}

.innerborder {
  border-style: dashed;
  height: 360px;
  border-radius: 50%;
}

＆＃13;

<body style="background: black;">
  <div class="container">
    <div class="border">
      <div class="innerborder">
      </div>
    </div>
  </div>

＆＃13;

Answer 4

Here是一个有效的例子。我约束了两个div的维度，并让它们margin: 0 auto将它们放在容器中心。我使内部div在纵向和高度方向上都缩小了20px。

box-sizing: border-box;

这一点会使你的边框实际上没有为你的div添加任何宽度或高度，这使我们可以使用一个简单的

position: relative;
top: 10px;

将内部div降低10个像素（或两个div之间的高度差的一半）。与margin: 0 auto的水平对齐负责将div水平居中，结果是圆圈内的整齐圆圈。

Answer 5

最简单的方法是使用box-shadow属性。

画圈子
给它边框
box-shadow white颜色。

＆＃13;

body {
  background: #000;
}

.container {
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  width: 100%;
}

.border {
  background: white;
  border-radius: 50%;
  width: 270px;
  height: 270px;
  margin: 30px auto;
  border: 2px dashed #000;
  box-shadow: 0 0 0 15px #fff;
}

＆＃13;

<div class="container">
  <div class="border">
  </div>

</div>

＆＃13;

Answer 6

以下是您要查找的代码

body{
  background:#000;
}

.outer{
  height:200px;
  width:200px;
  border-radius:50%;
  background:#fff;
  margin:35px auto;
  padding:10px;
}

.inner{
  height:100%;
  width:100%;
  border-radius:50%;
  border:1px dashed #b8b8b8;
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 7

圆圈div必须是正方形。
将内边框div作为绝对放置到父圆`div'。
您还可以使用伪元素来使用before或after。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style media="screen">
.container{    max-width: 980px;
    height: auto;
    margin: 0 auto;
    width: 100%;}
    .border{background: white;
    border-radius: 50%;
    height: 300px;
width:300px;

position:relative;
}

    .innerborder{    border-style: dashed;
    height:200px;
    border-radius: 50%;
width : 200px;
position:absolute;
left:0; right:0; top:0; bottom:0;
margin:auto;
}
  </style>
  <body style="background: black;">

        <div class="container">
          <div class="border">
            <div class="innerborder">
            </div>
          </div>

        </div>
  </body>
</html>

如何在div内部设置带内边框的div？

7 个答案: