使用css3繪制出各種幾何圖形

2024-07-11 08:25:45

字體：大中小

來源：轉載

供稿：網友

1、圓形

示例:　　　　　　　　　
思路：給任何正方形元素設置一個足夠大的 border-radius ，就可以把它變成一個圓形.代碼如下：

html:

復制代碼

代碼如下:
<div class="size example1"></div>

css:

復制代碼

代碼如下:
.size{
width:200px;
height: 200px;
background: #8BC34A;
}
.example1{
border-radius:100px;
}

2、自適應橢圓

思路：border-radius 這個屬性還有另外一個鮮為人知的真相，它不僅可以接受長度值，還可以接受百分比值。這個百分比值會基于元素的尺寸進行解析.這意味著相同的百分比可能會計算出不同的水平和垂直半徑。

代碼如下：

html:

復制代碼

代碼如下:
<div class="example3"></div>

css:

復制代碼

代碼如下:
.example3{
width:200px;
height: 150px;
border-radius:50%;
background: #8BC34A;
}
[/code}</p><p><strong><font color="#ff0000">3、自適應的半橢圓:沿橫軸劈開的半橢圓</font></strong></p><p><img border="0" alt="" src="https://files.Vevb.com/file_images/article/201608/2016081516050814.jpg" />
思路：border-radius 的語法比我們想像中靈活得多。你可能會驚訝地發現 border-radius 原來是一個簡寫屬性。</p><p>第一種方法就是使用它所對應的各個展開式屬性：
[code]
„ border-top-left-radius
„ border-top-right-radius
„ border-bottom-right-radius
„ border-bottom-left-radius

我們甚至可以為所有四個角提供完全不同的水平和垂直半徑，方法是在斜杠前指定 1~4 個值，在斜杠后指定另外 1~4 個值。舉例來說，當 border-radius 的值為10px / 5px 20px 時，其效果相當于 10px 10px 10px 10px / 5px 20px 5px 20px 。

為 border-radius 屬性分別指定4、3、2、1 個由空格分隔的值時，這些值是以這樣的規律分配到四個角上的（請注意，對橢圓半徑來說，斜杠前和斜杠后最多可以各有四個參數，這兩組值是以同樣的方法分配到各個角的）

代碼如下：自適應的半橢圓:沿橫軸劈開的半橢圓