如何使用div內的內部邊框來設置div的樣式？

你如何定位內部邊框，使其看起來像這樣。如何使用div內的內部邊框來設置div的樣式？

我的內邊框div包含一個邊框樣式：虛線;

.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%; 
 
}

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

，我試圖似乎並沒有產生有關圖像輸出的CSS。有沒有其他的方式來實現這個使用CSS？請幫忙。

來源

2017-03-16 Laurence Albano

我會建議你使用pseudo selector :before和下面創建dashed border內.container，

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; 
 
}

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

EV你的代碼工作正常，只需添加padding to .border並減少.inner-border的高度，我已將.container to 400px的高度更改爲適當的圓圈。

.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%; 
 
}

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

來源

2017-03-16 06:13:01 frnt

@Laurence Albano希望這可以工作。 – frnt

你可以用絕對定位來做到這一點。就像這樣：

<!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>

來源

2017-03-16 06:11:45 Zeus

這樣的事情，

使用box-sizing:border-box和width:100%和height:100%的內格

*{ 
 
    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%; 
 
}

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

來源

2017-03-16 06:12:18

這正是我需要的，謝謝先生。 –

隨時，快樂編碼！ –

最簡單的方法是使用box-shadow屬性。

畫出你的圈子
給它的邊界
給它white顏色的box-shadow。

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; 
 
}

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

 
</div>

來源

2017-03-16 06:12:28

這裏是你正在尋找

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>

來源

2017-03-16 06:14:07 Suresh

圓格必須是一個方形的代碼。
已經將內邊框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>

來源

2017-03-16 06:14:10 karan3112

Here是一個工作示例。我約束了兩個div的尺寸，並給它們margin: 0 auto將它們置於它們的容器中。我使內部div的縱向和縱向均縮小了20px。

box-sizing: border-box;

該位將使使你的邊界實際上不添加任何寬度或高度，以您的DIV，這使得我們可以用一個簡單的

position: relative; 
top: 10px;

要砸下來的內部DIV 10像素（或2個div之間的高度差的一半）。與margin: 0 auto的水平對齊將水平對齊div，結果是在一個圓圈內看起來很整齊。

來源

2017-03-16 06:19:15 Bango

如何使用div內的內部邊框來設置div的樣式？

回答

相關問題