Ichki chegaradagi divni div ichida qanday qilib tarjima qilish mumkin?

Ichki chegara qanday ko'rinishini shunday qilib qo'ying.

enter image description here

Mening ichki chegara bo'limi chegara stilini o'z ichiga oladi: dashed;

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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>
</div> </div>

Men sinab ko'rgan CSS rasmga bog'liq bo'lgan chiqishni yaratmayapti. CSS-ni ishlatishning boshqa usullari bormi? Iltimos yordam bering.

0

7 javoblar

Shunga o'xshash narsa,

Ichki div uchun ishlatilgan quti o'lchamlari: border-box va width: 100% va height: 100%

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

*{
  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>
</div> </div>
2
qo'shib qo'ydi
Har doim, baxtli kodlash!
qo'shib qo'ydi muallif Abhishek Pandey, manba
Bu menga kerak bo'lgan narsadir, rahmat.
qo'shib qo'ydi muallif user4873951, manba

Here is a working example. I constrain the dimensions of both divs, and give them margin: 0 auto to center them in their container. I made the inner div 20px smaller both lengthwise and heightwise.

box-sizing: border-box;

Bu bit sizning chegaraingiz sizning div-ga kenglik yoki balandlik qo'shib bermasligi uchun amalga oshiradi, bu bizga sodda foydalanish imkonini beradi

position: relative;
top: 10px;

Ichki divni 10 piksel (yoki 2 divs orasidagi farqning yarmi) pastga tushirish. margin: 0 auto bilan horizontal hizalama divsni gorizontal ravishda markazlashtirishga e'tibor beradi va natijalar doira ichida toza ko'rinadigan doira hisoblanadi.

1
qo'shib qo'ydi

pseudo selector: dan foydalanish va .container ichida dashed border dan foydalanishni tavsiya etaman,

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
</div> </div>

Sizning kodingiz ham yaxshi ishlaydi, faqat padding .border ga qo'shing va .inner-chegarasining balandligini kamaytiring, uni .container to 400px doira.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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>
</div> </div>
1
qo'shib qo'ydi
@Laurence Albano Ushbu ishlarga umid qilaman.
qo'shib qo'ydi muallif frnt, manba

Buni mutlaq joylashuv bilan bajarishingiz mumkin. Shunga o'xshash :

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body style="background: black;">

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

  </div>
</body>

</html>
</div> </div>

1
qo'shib qo'ydi

Mana, siz izlayotgan kod

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
</div> </div>
0
qo'shib qo'ydi
    <div> Doira doirasi kvadrat bo'lishi kerak.
  • Ichki chegara div ni ota-doira "div" ga mutlaq ravishda joylashtirgan.
  • Bundan tashqari oldin yoki keyin dan foydalanish uchun soxta elementlardan foydalanishingiz mumkin.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  
  <body style="background: black;">

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

        </div>
  </body>
</html>
</div> </div>

0
qo'shib qo'ydi

Eng oson yondashuv box-shadow xususiyatidan foydalanadi.

  1. Doira chizish
  2. Chegarangizga bering
  3. oq rangini quti shadow kiriting.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>
</div> </div>
0
qo'shib qo'ydi