如何使用 CSS 創建一個圓形或正方形 – 一個空心的中心？

問題描述

它應該基本上是一個方形或圓形的輪廓 – 我可以相應地設計風格 (即將顏色改為任何我想要的，改變邊框的厚度等)

我想把這個圓圈或正方形應用於別的東西 (如圖像或東西)，中間部分應該被挖空，所以你可以看到正方形或圓形下的圖像。

我更喜歡它主要是 CSS + HTML 。

最佳解決方案

嘗試這個



div.circle {
  -moz-border-radius: 50px/50px;
  -webkit-border-radius: 50px 50px;
  border-radius: 50px/50px;
  border: solid 21px #f00;
  width: 50px;
  height: 50px;
}

div.square {
  border: solid 21px #f0f;
  width: 50px;
  height: 50px;
}
<div class="circle">
  <img/>
</div>
 <hr/>
<div class="square">
  <img/>
</div>

More here

次佳解決方案

您可以使用特殊字符來製作大量的形狀。示例：http://jsfiddle.net/martlark/jWh2N/2/



<table>
  <tr>
    <td>hollow square</td>
    <td>□</td>
  </tr>
  <tr>
    <td>solid circle</td>
    <td>&bull;</td>
  </tr>
  <tr>
    <td>open circle</td>
    <td>๐</td>
  </tr>

</table>

還有更多的可以在這裏找到：HTML Special Characters

第三種解決方案

我不知道一個簡單的 css(2.1 標準) – 圓圈的解決方案，但是對於方格，你可以輕鬆做到：

.squared {
    border: 2x solid black;
}

然後，使用以下 html 代碼：

<img src="…" alt="an image " class="squared" />

第四種方案

如果您希望您的 div 保持圓形，即使您更改其寬度/高度 (例如使用 js)，將半徑設置為 50％。示例：css：

.circle {
    border-radius: 50%/50%; 
    width: 50px;
    height: 50px;
    background: black;
}

HTML：

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

第五種方案

圈時間！ :) 使用一個空心中心做一個圓圈的簡單方法：使用 border-radius，給元素一個邊框，沒有背景，所以你可以看到它：



div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    border-radius: 100%;
    width:100px;
    border:solid black 2px;
}

body{
    background:url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
}
<div></div>

第六種方案

據我所知，沒有 cross-browser 兼容的方式，使 CSS& 僅 HTML 。

對於廣場我猜你可以做一個邊框邊框和一個 z-index 高於你把它的結果。我不明白為什麼你需要這樣做，當你可以把圖像邊框或”something” 本身。

如果有其他人知道如何製作一個跨瀏覽器與 CSS& 只有 HTML，我很樂意聽到它！

@Caspar Kleijne border-radius 在 IE8 或以下不工作，不確定 9 。

參考文獻

How do I create a circle or square with just CSS – with a hollow center?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何使用 CSS 創建一個圓形或正方形 – 一個空心的中心？