整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
顧那個只能用圖片展示形狀的日子，之前接觸前端的小伙伴們，大家一定會有頗多感觸，好在現(xiàn)在我們可以使用純CSS實現(xiàn)更多想要的形狀效果，今天小編來整理一下，希望對大家有所幫助，也方便自己后期的查看。
使用border-radius制作一個圓很簡單，只要給任何正方形元素設置固定寬高及一半長度以上的border-radius，就可以得到圓形
圓形
橢圓
在實際開發(fā)中可能更多的是讓元素根據(jù)內容自動調增，而不是事先設置好寬高，因為很多時候內容是不定的。我們期望：如果寬高相等，就顯示一個圓，不相等就顯示一個橢圓。
上面代碼實現(xiàn)不了，當寬度大于高度的時候，便會出現(xiàn)下面這種情況：
解決方案：
border-radius可以單獨指定水平和垂直半徑，只要用一個(/)分隔這兩個值就行。還一個特性是，它可以接受長度值，還可以接受百分比，兩種特性結合，就可以自適應了。
由于斜杠前后的兩個值現(xiàn)在是一致的，可以簡寫
半橢圓
border-radius是一個簡寫屬性，包含四個展開式屬性，這樣一來可以通過設置四個角的不同半徑來達到效果。
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;
我們要實現(xiàn)
弄清了，border-radius的用法，開始分析上面半橢圓的實現(xiàn)
這個形狀是垂直對稱的，意味著左上角和右上角的半徑值應該相同，右下角和左下角半徑也是相同
頂部邊緣沒有平直的部分，意味著左上角和右上角半徑之和應該等于整個形狀的寬度，結合上一條，左半徑和右半徑在水平方向上是50%。
垂直方向，頂部的兩個圓角占據(jù)了整個元素的高度，而且底部沒有任何圓角，因此在垂直方向上值應該好似100% 100% 0 0。
因為底部兩個角的垂直圓角是零，那么他們的水平圓角是多少就完全不重要了
想學習更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干貨。
沿縱軸劈開的半橢圓
四分之一的橢圓
創(chuàng)建一個四分之一橢圓，其中一個角水平和垂直半徑值都需要100%，而其他三個角都不能設為圓角
就這樣各種方向的橢圓效果就描繪出來了，喜歡的小伙伴可以多多支持點贊，轉發(fā)哦！
后面會繼續(xù)分享其他形狀的具體實現(xiàn)。
你把一個正方形元素的border-raidus設置的足夠大的時候，你就得到了一個圓形，你也可能會發(fā)現(xiàn)，只要指定border-radius的值大于正方形邊長的一半以后，你就得到了一個圓形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background: #fb3;
width: 200px;
height: 200px;
border-radius: 150px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>不過，我們往往不是很想去固定一個元素的高度與寬度，而是希望它能根據(jù)內容自動去調整與適應，也就是說：如果它的寬高相等，那么就顯示一個圓，如果不想等就顯示一個橢圓。
其實border-radius是可以單獨指定水平半徑和垂直半徑的，只要用一個“ / ” 分開即可。
并且它不僅可以接受長度值，也可以接受百分比值。這個百分比值會基于元素的尺寸進行解析。
<style>
.box{
background: #fb3;
width: 200px;
height: 300px;
border-radius: 50%
}
</style>既然已經可以生成一個自適應的橢圓，那么能不能生成橢圓的一部分？
其實border-radius是一個簡寫屬性，其擴展屬性是：
但我們還是偏向于用border-radius這個簡寫屬性，我們可以一次性提供并且用空格分開。
如果我們傳給它4個值，這個四個值就被分別從左上角開始以順時針順序應用到元素的各個拐角。
如果是3個值，則第四個值與第二個值相同。
如果是2個值，則一和三相同，二和四相同。
如果1個值，則四個值都相同。
我們也可以為所有4個角提供完全不同的水平和垂直半徑，方法是“/”前指定水平的1～4個值，“/”后指定垂直的1～4個值，順序和規(guī)律與之前論述的相同。
因此，我們可以得到一個半橢圓：
<style>
.box{
background: #fb3;
width: 200px;
height: 200px;
border-radius: 50% / 100% 100% 0 0;
}
</style>半橢圓分析如下：
四分之一圓：
shape的意思是圖形，CSS shapes也就是css 圖形的意思了，也就是使用CSS生成各種圖形（圓形、矩形、橢圓型、多邊形等集合圖形）。在CSS3之前，我們能做的只有生成矩形，四四方方，條條框框。
我們先來看看使用shapes后，我們的顯示效果吧。
是不是很酷炫？那么我們怎么才能做到這樣的效果呢。
首先我們需要了解shape下面的一個屬性 shape-outside。
它也具有制造各種集合圖形的能力，但是它只能和浮動 float 一起使用。
雖然使用上有所限制，但是它賦予了我們一種更為自由的圖文混排能力。
讓我們看下代碼
css部分
html部分
好了，這就是shape-outside寫好的一個小demo。希望大家會喜歡。
如果還想更深入的了解前端知識，請大家關注我，我會不定期的發(fā)一些關于前端的知識。
謝謝大家的觀看。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
