一.自適應(yīng)的橢圓

問(wèn)題：

我們肯定都注意到過(guò)瘪撇，我們給一個(gè)正方形元素添加一個(gè)足夠大的border-radius（指定大于正方形元素邊長(zhǎng)一半的半徑）获茬，就可以使其變成一個(gè)圓形(如圖1-1.png)。

示例：

width: 200px;
height: 200px;
backgrund: #FFC727;
border-radius: 100px;

圖1-1.png

規(guī)范還特別指出了其中的原因：

“當(dāng)任意兩個(gè)相鄰圓角的半徑之和超過(guò)border box的尺寸時(shí)倔既，用戶代理必須按比例減小各個(gè)邊框半徑所使用的值恕曲，直到它們不會(huì)相互重疊為止〔秤浚”

我們有時(shí)可能不愿意給一個(gè)元素設(shè)置固定的寬高佩谣，而是希望讓元素能根據(jù)內(nèi)容自己調(diào)整并適應(yīng)。如果我們現(xiàn)在需要這樣的效果：如果元素的寬高相等实蓬，就顯示為一個(gè)圓茸俭，如果不相等就顯示為橢圓吊履。我們前面的代碼并不能滿足這樣的效果，那我們應(yīng)該怎么來(lái)產(chǎn)生一個(gè)橢圓呢调鬓？

解決方案：

其實(shí)就是一個(gè)你可能并不知道的真相艇炎，那就是border-radius它可以單獨(dú)指定水平半徑和垂直半徑，用（/）分隔兩值即可腾窝。這樣我們就可以得到一個(gè)相對(duì)精確的橢圓（圖1-2.png）缀踪。

示例：

width: 200px;
height: 150px;
background: #ffc727;
border-radius: 100px / 75px;

圖1-2.png

這樣就得到了一橢圓，但是它元素的尺寸變化燕锥，border-radius值也需要改變辜贵，那也是有點(diǎn)麻煩的。那我們?cè)趺崔k呢归形？
其實(shí)呢托慨，哈哈，那就是border-radius值是接收百分比值的暇榴；
所以設(shè)置border-radius: 50%;就可以實(shí)現(xiàn)一個(gè)自適應(yīng)的橢圓了厚棵；

好吧，那我們就來(lái)看看border-radius吧蔼紧。
1. border-radius:<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?
where
<length-percentage> = <length> | <percentage>

(1.1) border-radius 用來(lái)設(shè)置邊框圓角婆硬。當(dāng)使用一個(gè)半徑時(shí)確定一個(gè)圓形；當(dāng)使用兩個(gè)半徑時(shí)確定一個(gè)橢圓奸例，這個(gè)(橢)圓與邊框的交集形成圓角效果彬犯。（圖1-3.png）

圖1-3.png---來(lái)自MDN

(1.2)border-radius前一個(gè)語(yǔ)法取值可以取1~4個(gè)值,看下圖（圖1-4.png）就很清楚了,指定的是水平半徑；
后一個(gè)語(yǔ)法取值也可以取1~4個(gè)值（同前一個(gè)語(yǔ)法）查吊，指定的是垂直半徑谐区；

圖1-4.png---來(lái)自css揭秘

二分之一橢圓（圖1-5.png）

width: 200px;
height: 150px;
background: #ffc727;
border-radius: 50% /100% 100% 0 0;
<!--border-top-left-radius: 50% 100%;-->
<!--border-top-right-radius: 50% 100%;-->
<!--border-bottom-right-radius: 50% 0px;-->
<!--border-bottom-left-radius: 50% 0px;-->

圖1-5.png

四分之一橢圓（圖1-6.png）

width: 200px;
height: 150px;
background: #ffc727;
border-radius: 100% 0 0 0;

圖1-6.png

隨便加了點(diǎn)陰影（圖1-7.png）

width: 200px;
height: 150px;
background: #ffc727;
border-radius: 50%/100% 0;
box-shadow: 0px 10px 20px 0;

圖1-7.png

二.平行四邊形

問(wèn)題：

我們可以通過(guò)skew()來(lái)對(duì)矩形進(jìn)行拉伸來(lái)生成一個(gè)平行四邊形（如圖2-1.png）；

圖2-1.png

平行四邊形是生成了逻卖，但是里面的內(nèi)容“hello”也進(jìn)行了拉伸宋列，這樣就比較難閱讀，也不好看评也。那么有什么辦法只讓形狀拉伸炼杖，而保持內(nèi)容不變呢？

解決方案：

我們可以把所有樣式都應(yīng)用到為元素上盗迟，然后對(duì)偽元素進(jìn)行變形坤邪。因?yàn)槲覀兊膬?nèi)容并不是包含在偽元素里，所以內(nèi)容不會(huì)受到形變的影響诈乒。

示例：（圖2-2.png）

.box{
    margin: 100px;
    width:100px;
    height:40px;
    position:relative;
    text-align: center;
    line-height:40px;
    color: #fff;
}
.box::before{
    content: "";
    position: absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    background: #ffc727;
    transform: skew(-45deg);
    z-index:-1;
}

圖2-2.png

三.菱形圖片

我們可以通過(guò)clip-path屬性來(lái)快速實(shí)現(xiàn)菱形圖片的效果,不過(guò)它現(xiàn)在還是一個(gè)實(shí)驗(yàn)中的功能罩扇，它的兼容性不是很好。
clip-path:<clip-source> | [ <basic-shape> || <geometry-box> ] | none
where
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

示例：(圖3-1.png)

img{
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}

圖3-1.png

basic-shape有四種基本形狀（inset,cicle,ellipse,polygon）,感覺(jué)好方便啊，那我們就一起來(lái)看看吧喂饥。
（3.1）<inset()> ：定義一個(gè)插圖矩形
where
<inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
inset()可以傳入5個(gè)參數(shù)（第5個(gè)參數(shù)可選）消约，分別對(duì)應(yīng)top,right,bottom,left,round radius，我們看一下下面的示例（圖3-2.png）员帮，就清楚了或粮；

示例：（圖3-2.png）

clip-path: inset(10px 10px 50px 20px round 30px);

圖3-2.png

（3.2）<circle()>：圓
where
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
circle()可以傳人2個(gè)可選參數(shù)；
第一個(gè)參數(shù)是圓的半徑捞高，默認(rèn)為圖片寬高中短的那個(gè)為直徑氯材；
注意：這個(gè)參數(shù)是支持百分比的，如果用百分比：
圓的半徑/百分比=sqrt(width^2+height2)/sqrt(2)硝岗。
第二個(gè)參數(shù)是圓心位置氢哮，默認(rèn)為圖片中心。

示例：（圖3-3.png）

clip-path: circle(30% at 150px 120px);

圖3-3.png

（3.3）<ellipse()>：橢圓
where
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
ellipse()可以傳入3個(gè)可選參數(shù)型檀；
前2個(gè)參數(shù)表示的分別是橢圓X軸半徑和Y軸半徑冗尤，默認(rèn)是圖片寬（高）的一半，支持百分比胀溺；
第三個(gè)參數(shù)是橢圓中心位置裂七，默認(rèn)圖片中心。

示例：（圖3-4.png）

clip-path: ellipse(25% 25% at 50% 25%);

圖3-4.png

（3.4）<polygon()>：多邊形
where
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
polygon()中前一個(gè)語(yǔ)法<fill-rule>表示填充規(guī)則用來(lái)確定該多邊形的內(nèi)部仓坞”沉悖可能的值有nonzero和evenodd,默認(rèn)值是nonzero;
后面列表中的每對(duì)參數(shù)表示多邊形的頂點(diǎn)坐標(biāo)（X,Y）;

示例：（圖3-5.png）

clip-path: polygon(50% 0,100% 50%,0 100%);

圖3-5.png

clip-path這個(gè)屬性還可以參與動(dòng)畫(huà)呢，只要我們使用的是同一種形狀函數(shù)无埃。

示例：（圖3-6.png）

img{
    clip-path: ellipse(75% 25%);
    transition: 1s clip-path;
}
img:hover{
    clip-path: ellipse(50% 50%);
}

圖3-6.png

四.切角效果
我這里用上面的clip-path來(lái)實(shí)現(xiàn)下徙瓶，可以通過(guò)css漸變和border-image實(shí)現(xiàn)。
（4.1）clip-path實(shí)現(xiàn)切角效果

示例：（圖4-1.png）
CSS

.box{
width:200px;
height:200px;
background: #FFc727;
clip-path: polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px);
}

>
這樣要改一切角嫉称，就要改好多地方倍啥，不是很方便,我們就用一下預(yù)處理器，我使用的是LESS澎埠，這樣就稍稍好了一些，但也不夠DRY始藕。
LESS
>>```
.corner(@radius){
    @ca: e("calc(100% - @{radius})");
    <!--@ca: calc(~"100% - @{radius}");-->
    clip-path: polygon(@radius 0,@ca 0,100% @radius,100% @ca,@ca 100%,@radius 100%,0 @ca,0 @radius);
}
.box{
    width:200px;
    height:200px;
    background: #FFc727;
    .corner(20px);
}

圖4-1.png

未來(lái)蒲稳，可能會(huì)引入一個(gè)新的屬性corner-shape，配合border-radius使用伍派，這樣就可以快速實(shí)現(xiàn)一些切角的問(wèn)題江耀。
corner-shape介紹：http://lea.verou.me/2013/03/border-corner-shape-is-in-danger-and-you-can-help/
corner-shape體驗(yàn)：http://leaverou.github.io/corner-shape/

本內(nèi)容根據(jù)《css揭秘》, MDN 和自己的理解進(jìn)行整理；
感謝您的閱讀诉植。