CSS如何實現各種形狀

CSS實現各種形狀的方法：1、圓形在設定CSS時要設定寬度和高度相等，然後設定【border-radius】屬性為寬度或高度的一半；2、正方形是CSS圖形中最簡單的圖形之一，同樣使用一個div，並設定一個ID。

本教學操作環境：windows7系統、css3版，DELL G3電腦。

CSS實作各種形狀的方法：

1、圓形

要使用CSS來製作一個圓形，我們需要一個div，被給它設定一個ID。

<div id="circle"></div>

圓形在設定CSS時要設定寬度和高度相等，然後設定border-radius屬性為寬度或高度的一半即可：

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

2、方形

正方形是CSS圖形中最簡單的圖形之一，同樣使用一個div，並且設定一個ID。

<div id="square"></div>

                          

#正方形中的CSS樣式中所需要設定相同的寬度與高度。

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}

相關教學推薦：CSS影片教學

以上是CSS如何實現各種形狀的詳細內容。更多資訊請關注PHP中文網其他相關文章！