如何使用css製作圓形背景？

我需要做這樣的事情。我想這樣做的<div></div>具有width在%如何使用css製作圓形背景？

enter image description here

我可以通過使用圖像和添加其他div內z-index做到這一點。

但我想知道是否有可能在使用CSS的背景中的這個圈子。

來源

2012-01-03 Jitendra Vyas

可以使用border-radius屬性完成。基本上，您需要將邊框半徑設置爲高度和寬度的一半以獲得一個圓。

JSFiddle

HTML

<div id="container"> 
    <div id="inner"> 
    </div> 
</div>

CSS

#container 
{ 
    height:400px; 
    width:400px; 
    border:1px black solid; 
} 

#inner 
{ 
    height:200px; 
    width:200px; 
    background:black; 
    -moz-border-radius: 100px; 
    -webkit-border-radius: 100px; 
    border-radius: 100px; 
    margin-left:25%; 
    margin-top:25%; 
}

來源

2012-01-03 07:55:41 xbonez

+1謝謝，但我要求實現這一目標使用'div'如果有可能 – 2012-01-03 08:00:40

但如果在你的解決方案是不可能的，我將不得不使用的z-index因爲我需要添加一些與圈子重疊的文本和圖像 – 2012-01-03 08:05:12

我會說這是一個非常聰明的解決方案，@ xbonez。 – 2012-01-03 08:06:43

您可以使用:before和:after僞類把一個多層的背景元素。

#divID : before { 
    background: url(someImage); 
} 

#div : after { 
    background : url(someotherImage) -10% no-repeat; 
}

來源

2012-01-03 08:15:25 Acn

如果您只想使用1個元素執行此操作，則可以對同一個div使用:: before和:: after僞元素而不是包裝器。
見http://css-tricks.com/pseudo-element-roundup/

來源

2012-01-03 08:15:39

Here是用CSS屬性的單個元素div做一個解決方案，border-radius確實神奇。

CSS：

.circle{ 
    width:100px; 
    height:100px; 
    border-radius:50px; 
    font-size:20px; 
    color:#fff; 
    line-height:100px; 
    text-align:center; 
    background:#000 
}

HTML：

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

來源

2013-07-09 10:18:02 Wrench

請與下面的CSS。 Demo

.circle { 
    width: 140px; 
    height: 140px; 
    background: red; 
    -moz-border-radius: 70px; 
    -webkit-border-radius: 70px; 
    border-radius: 70px; 
}

對於更多的形狀，你可以按照以下網址：

http://davidwalsh.name/css-triangles

來源

2013-07-09 10:27:28

css3shapes.com重定向到scummy網站 – jokkedk 2016-09-28 21:33:58

保持簡單：

.circle 
    { 
    border-radius: 50%; 
    width: 200px; 
    height: 200px; 
    }

寬度和高度可以是任何東西，如只要他們等於

來源

2014-02-19 08:54:26

漸變？

div { 
    width: 400px; height: 400px; 
    background: radial-gradient(ellipse at center, #f73134 0%,#ff0000 47%,#ff0000 47%,#23bc2b 47%,#23bc2b 48%); 
}

https://fiddle.jshell.net/su5oyd4L/

來源

2016-11-10 19:34:44

如何使用css製作圓形背景？

回答

相關問題