CSS中的形状
CSS中的形狀
- 自適應(yīng)的橢圓
- 橢圓
- 半橢圓
- 四分之一橢圓
- 平行四邊形
- 其他形狀
- 大于號(hào)
- 愛(ài)心
- 六芒星
自適應(yīng)的橢圓
橢圓
在日常的編寫代碼中可以發(fā)現(xiàn)給任何正方形元素設(shè)置一個(gè)足夠大的 borderradius，就可以把它變成一個(gè)圓形
background: #fb3; width: 200px; height: 200px; border-radius: 100px; /* >= 正方形邊長(zhǎng)的一半 */要寫出橢圓的形式就要將border-radius 這個(gè)屬性后面的值改為百分比形式。這個(gè)百分比值會(huì)基于元素的尺寸進(jìn)行解析，即寬度用于水平半徑的解析，而高度用于垂直半徑的解析。這意味著相同的百分比可能會(huì)計(jì)算出不同的水平和垂直半徑。因此，如果要?jiǎng)?chuàng)建一個(gè)自適應(yīng)的橢圓，我們可以把這兩個(gè)半徑值都設(shè)置為 50%：
border-radius: 50%;最終，只需要這一行代碼，我們就可以得到一個(gè)自適應(yīng)的橢圓了
半橢圓
現(xiàn)在我們已經(jīng)知道如何用 CSS 來(lái)生成一個(gè)自適應(yīng)的橢圓了，接下來(lái)很自然地就會(huì)問(wèn)到：我們是否還能生成其他常見(jiàn)的形狀呢，比如橢圓的一部分？讓我們先來(lái)思考一下半橢圓吧
幸運(yùn)的是，border-radius 的語(yǔ)法比我們想像中靈活得多。你可能會(huì)驚訝地發(fā)現(xiàn) border-radius 原來(lái)是一個(gè)簡(jiǎn)寫屬性。我們可以為元素的每個(gè)角指定不同的值，而且還有兩種方法可以做到這一點(diǎn)。第一種方法就是使用它所對(duì)應(yīng)的各個(gè)展開(kāi)式屬性：
? border-top-left-radius
? border-top-right-radius
? border-bottom-right-radius
? border-bottom-left-radius
為 border-radius 屬性分別指定4、3、2、1 個(gè)由空格分隔的值時(shí)，這些值是以這樣的規(guī)律分配到四個(gè)角上的（請(qǐng)注意，對(duì)橢圓半徑來(lái)說(shuō)，斜杠前和斜杠后最多可以各有四個(gè)參數(shù)，這兩組值是以同樣的方法分配到各個(gè)角的）
把所有這些結(jié)論綜合起來(lái)，我們就可以很容易地寫出 CSS 代碼，來(lái)生成圖1中那樣自適應(yīng)的半橢圓
四分之一橢圓
在創(chuàng)建了一個(gè)完整的橢圓和半橢圓之后，很自然的下一個(gè)問(wèn)題就是如何生成四分之一橢圓（其形狀如圖 3 所示）。延續(xù)前面所講的思路，我們注意到，要?jiǎng)?chuàng)建一個(gè)四分之一橢圓，其中一個(gè)角的水平和垂直半徑值都需要是100%，而其他三個(gè)角都不能設(shè)為圓角。由于這四個(gè)角的半徑在水平和垂直方向上都是相同的，我們甚至都不需要使用斜杠語(yǔ)法了。最終代碼應(yīng)該是這樣的
border-radius: 100% 0 0 0;你不免還會(huì)順著往下想，是不是還能用 border-radius 來(lái)生成橢圓的其他切塊（比如八分之一橢圓、三分之一橢圓）？很遺憾，你可能會(huì)失望了，因?yàn)?border-radius 屬性是無(wú)法生成這些形狀的。
平行四邊形
讓我們?cè)囍?CSS 創(chuàng)建一個(gè)按鈕狀的平行四邊形鏈接。我們的起點(diǎn)就是一個(gè)普通的塊狀按鈕，輔以一些簡(jiǎn)單的樣式。然后，我們可以通過(guò) skew() 的變形屬性來(lái)對(duì)這個(gè)矩形進(jìn)行斜向拉伸：
transform: skewX(-45deg);但是，這導(dǎo)致它的內(nèi)容也發(fā)生了斜向變形，這很不好看，而且難讀（參見(jiàn)圖 4）。有沒(méi)有辦法只讓容器的形狀傾斜，而保持其內(nèi)容不變呢？
嵌套元素方案
我們?cè)趫D 3-15 中可以看到，這個(gè)方法的表現(xiàn)很不錯(cuò)，但它也意味著我們不得不添加額外的 HTML 元素。
偽元素方案
這個(gè)技巧不僅對(duì) skew() 變形來(lái)說(shuō)很有用，還適用于其他任何變形樣式，當(dāng)我們想變形一個(gè)元素而不想變形它的內(nèi)容時(shí)就可以用到它。舉個(gè)例子，我們把這個(gè)技巧針對(duì) rotate() 變形樣式稍稍調(diào)整一下，再用到一個(gè)正方形元素上，就可以很容易地得到一個(gè)菱形。
這個(gè)技巧的關(guān)鍵在于，我們利用偽元素以及定位屬性產(chǎn)生了一個(gè)方塊，然后對(duì)偽元素設(shè)置樣式，并將其放置在其宿主元素的下層。這種思路同樣可以運(yùn)用在其他場(chǎng)景中，從而得到各種各樣的效果
其他形狀
大于號(hào)
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"> <title>畫圖</title><style type="text/css">.a2{position: absolute;left: 50px;top: 50px;width: 0;height: 0;border:70px solid;border-color: transparent transparent transparent red; }.a1{position: absolute;left: 50px;top:70px;width: 0;height: 0;border:50px solid;border-color: transparent transparent transparent #fff;}</style></head><body> <div class="a2"></div><div class="a1"></div> </body> </html>愛(ài)心
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"> <title>畫圖</title><style type="text/css">.a1{position: absolute;width: 100px;height: 100px;border-radius: 100%;background-color: red;}.a2{width: 100px;height: 100px;border-radius: 100%;background-color: red;position: absolute;left: 75px;}.a2::after{position:absolute;left:-83px;top:-16px;content: "";width:100px;height:100px;background-color: red;transform: rotate(45deg);margin:50px}</style></head><body><div class="a1"></div><div class="a2"></div></body> </html>六芒星
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"> <title>畫圖</title><style type="text/css">.a1{width: 0;height: 0;border:40px solid;border-color: transparent transparent red;}.a1::after{content: "";position: absolute;left: 6px;top: 60px;width: 0;height: 0;border:40px solid;border-color:red transparent transparent ;}}</style></head><body><div class="a1"></div><div class="a2"></div></body> </html>總結(jié)
- 上一篇： 北语18秋《计算机应用基础》练习1,每日
- 下一篇： css svg使用_使用CSS使SVG响