可以使用下面這幾個(gè)函數(shù)來(lái)定義形狀：

• circle
• ellipse
• inset
• polygon

每個(gè)形狀都由一組坐標(biāo)定義。有些函數(shù)接受坐標(biāo)點(diǎn)作為參數(shù)，另外一些接受偏移量——但是最終它們都把形狀當(dāng)做元素上一系列的點(diǎn)來(lái)描繪。在下面的例子中，我們將為大家講解每個(gè)方法所接受的參數(shù)。

一個(gè)形狀還可以通過(guò)提取圖片的一個(gè)Alpha通道來(lái)定義。如果把一張圖片傳遞給Shape屬性，瀏覽器就會(huì)基于圖片的臨界值提取形狀。形狀的定義基于圖片上每一個(gè)點(diǎn)的Alpha通道是否高于臨界值。不過(guò)圖片必須是CORS compatible的。無(wú)論何種原因（比如圖片不存在），只要圖片不能正常顯示，就不會(huì)產(chǎn)生形狀。

可接受上面這些函數(shù)作為值的Shape屬性有：

• shape-outside：限制形狀周圍的內(nèi)容
• shape-inside：限制形狀內(nèi)部的內(nèi)容

可以把shape-margin和shape-outside屬性結(jié)合使用，定義形狀周圍的margin，以此隔開(kāi)浮動(dòng)的內(nèi)容和形狀，在形狀和內(nèi)容之間留出更多的空間。與shape-outside和shape-margin對(duì)應(yīng)一樣，shape-inside有對(duì)應(yīng)的shape-padding屬性，用來(lái)添加內(nèi)間距。

一行代碼就可以使用Shape屬性和函數(shù)來(lái)定義一個(gè)形狀：

.element {
    shape-outside: circle; /* content will flow around the circle defined on the element */
}

或者：

.element {
    shape-outside: url(path/to/image-with-shape.png);
}

但是。。。

要讓這行CSS生效，必須滿足兩個(gè)條件：

• 元素必須是浮動(dòng)的。新版的CSS Shape可以循序我們定義一個(gè)非浮動(dòng)元素的形狀，但是現(xiàn)在還不行；
• 元素必須有確定的尺寸。元素的寬度和高度被用來(lái)建立這個(gè)元素上的坐標(biāo)系統(tǒng)。

看上面函數(shù)的定義，形狀都是由一組坐標(biāo)定義的。因?yàn)檫@些點(diǎn)是坐標(biāo)，所以需要坐標(biāo)系統(tǒng)，這樣瀏覽器才知道把這些點(diǎn)放在元素的什么位置上。因此，加上下面這段代碼上面的例子就可以正常工作。

.element {
    float: left;
    height: 10em;
    width: 15em;
    shape-outside: circle;
}

給定固有的維數(shù)并不會(huì)影響響應(yīng)性（隨后我們進(jìn)行更深入的探討）。

既然形狀是由一系列帶坐標(biāo)的點(diǎn)定義的，那更改這些點(diǎn)的坐標(biāo)就可以相應(yīng)的更改形狀。舉個(gè)例子，下面的六邊形是使用polygon這個(gè)方法創(chuàng)建的。整個(gè)形狀由六個(gè)點(diǎn)構(gòu)成。更改黃點(diǎn)的橫坐標(biāo)將會(huì)影響產(chǎn)生的形狀，應(yīng)用了此形狀元素的內(nèi)部或者外部的內(nèi)容布局方式也會(huì)受到影響。

如果元素右浮動(dòng)，且應(yīng)用了這個(gè)形狀，當(dāng)在polygon函數(shù)中黃點(diǎn)的橫坐標(biāo)變化的時(shí)候，在元素左側(cè)的內(nèi)容的浮動(dòng)方式也會(huì)改變。

Shape的Reference Box

默認(rèn)把外邊界Box作為參考——因此，如果你應(yīng)用了形狀的元素的底部有外邊界，則形狀會(huì)延伸到外邊jie上，而不是元素的邊框區(qū)域。如果你想使用其他Box值，你可以在形狀函數(shù)之后指定，然后傳遞給Shape屬性。

shape-outside: circle(250px at 50% 50%) padding-box;

上面這條規(guī)則中的padding-box關(guān)鍵字，把形狀限定在了元素的內(nèi)邊框Box中。circle函數(shù)定義了一個(gè)環(huán)狀的形狀，包括這個(gè)形狀的大小和在這個(gè)元素上的位置。

使用Shape函數(shù)定義Shape

使用CSS Shape，讓文本環(huán)繞圓形的用戶頭像。文本將不再是長(zhǎng)方形的。

使用circle函數(shù)給頭像添加一個(gè)圓形：

<img src="http://api.randomuser.me/0.3.2/portraits/men/7.jpg" alt="profile image" />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?</p>

<p>Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.</p>

你可能會(huì)問(wèn)，“為什么不使用border-radius來(lái)做出圖片的圓角？”答案就是border-radius無(wú)法影響元素周圍或者內(nèi)部的內(nèi)容的布局。它只能影響元素的邊框和背景。背景區(qū)域會(huì)被裁剪成圓角，但是它功能僅限于此。元素內(nèi)部的內(nèi)容任然是矩形的，而且周圍的內(nèi)容還是把元素當(dāng)做一個(gè)矩形的存在——本質(zhì)上它還是。

我們使用border-radius讓圖片變圓——我們通常都是這樣讓圖片等其他元素變圓的。圖片bian'yuan

img {
    float: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-right: 15px;
}

不添加CSS Shape，文本任然把圖片當(dāng)做矩形的，因此還是圍繞成一個(gè)矩形，而不是圓的。

在不支持CSS Shape屬性的瀏覽器中，原型圖片周圍的內(nèi)容就像環(huán)繞在一個(gè)不是圓形的圖片周圍。這就是在較老瀏覽器中CSS Shape降級(jí)的效果。的

為了改變內(nèi)容布局以適應(yīng)特定的形狀，我們使用Shape屬性：

img {
    float: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;

    shape-outside: circle;
    shape-margin: 15px;
}

有了這些代碼，文本會(huì)看到一個(gè)圓的形狀在圖片上，環(huán)繞之，就像第一張截圖那樣（你可以在這里看到）。在不支持的瀏覽器中，將降級(jí)為第二張圖顯示的哪樣。

你可以像上面那樣使用circle函數(shù)，也可以傳遞參數(shù)給它。下面是它的語(yǔ)法：

circle=circle( [<shape-radius>]? [at <position>]? )

問(wèn)號(hào)標(biāo)示這些參數(shù)是可選的。省略的參數(shù)將會(huì)被瀏覽器使用默認(rèn)值補(bǔ)全。如果你直接使用circle而未指定圓形的位置，它會(huì)定義一個(gè)放在元素正中間的圓形。

你可以指定圓形的半徑，什么單位都可以（px、em、pt等等）。你甚至可以指定使用closest-side或者furthest-side作為半徑，closest-side是默認(rèn)值，即瀏覽器會(huì)把從中點(diǎn)到最近邊的長(zhǎng)度作為圓形的半徑。furthest-side則是使用中心到最遠(yuǎn)邊的距離。

shape-outside: circle(farthest-side at 25% 25%); /* defines a circle whose radius is half the length of the longest side, positioned at the point of coordinates 25% 25% on the element’s coordinate system*/

shape-inside: circle(250px at 500px 300px); /* defines a circle whose center is positioned at 500px horizontally and 300px vertically, with a radius of 250px */

eclipse函數(shù)與circle還是函數(shù)是一樣，除了接受兩個(gè)半徑參數(shù)以外（后者是一個(gè)參數(shù)列表）——一個(gè)是x軸的半徑，一個(gè)是y軸的——是一直的。

ellipse=ellipse( [<shape-radius>{2}]? [at <position>]? )

與circle和eclipse沒(méi)有直接的關(guān)系，inset函數(shù)再元素內(nèi)部創(chuàng)建一個(gè)矩形。既然元素本身就是矩形的，我們當(dāng)然不需要更多的矩形。inset實(shí)際上可以幫助我們?cè)谠貎?nèi)部創(chuàng)建一個(gè)帶有圓角的矩形。文本內(nèi)容可以環(huán)繞在圓角周圍。

inset函數(shù)接受1到4個(gè)值指定從參考Box邊緣向內(nèi)的距離。這可以控制這個(gè)矩形在元素內(nèi)部的位置。這個(gè)函數(shù)還接受一個(gè)可選參數(shù)，設(shè)置內(nèi)部矩形的圓角。且圓角的設(shè)置于border-radius的方法一致，使用一到四個(gè)值，于關(guān)鍵字round結(jié)合在一起。

inset=inset( offset{1,4} [round <border-radius>]? )

在一個(gè)浮動(dòng)的元素中創(chuàng)建一個(gè)帶圓角的矩形：

.element {
    float: left;
    width: 250px;
    height: 150px;
    shape-outside: inset(0px round 100px) border-box;
}

在這里查看實(shí)際的例子。

最后一個(gè)Shape函數(shù)是polygon，它可以是用任意數(shù)量的點(diǎn)來(lái)定義更加復(fù)雜的形狀。這個(gè)函數(shù)接受一系列的坐標(biāo)，每個(gè)坐標(biāo)定義多邊形的一個(gè)邊角，合在一起組成整個(gè)圖形。

在下面的例子中，一張右浮動(dòng)的圖片使用viewport單位，占滿了整個(gè)屏幕。我們希望左側(cè)的文本可以沿著圖片內(nèi)部的沙漏浮動(dòng)，因此，我們使用polygon函數(shù)在圖片上定義了一個(gè)不規(guī)則的的圖形。

圖片的CSS：

img.right {
    float: right;
    height: 100vh;
    width: calc(100vh + 100vh/4);
    shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
}

你可以使用長(zhǎng)度單位或者百分比來(lái)定義邊角的坐標(biāo)，我使用的是百分比。

這段代碼就是顯示出圖片的效果，你可以看到，Shape函數(shù)無(wú)法影響形狀外的圖片。事實(shí)上，一個(gè)形狀除了影響內(nèi)容的浮動(dòng)之外無(wú)法對(duì)元素造成其他任何影響，不管這個(gè)元素是圖片還是容器或者其他的什么。

為了讓我們創(chuàng)建的多邊形更有存在感，我們需要把形狀之外的圖片摳掉。這就需要CSS Masking模塊的clip-path屬性來(lái)幫忙了。

clip-path屬性接受同樣的Shape函數(shù)和參數(shù)座位形狀屬性。如果我們把傳遞給shape-outside的多邊形傳遞給clip-path屬性，它會(huì)把形狀之外的圖片全部摳掉。

img.right {
    float: right;
    height: 100vh;
    width: calc(100vh + 100vh/4);
    shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
    /* clip the image to the defined shape */
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
}

看效果：

目前，使用clip-path還需要使用前綴，這個(gè)例子clip-path使用了-webkit-前綴，因此可以在Chrome中工作，你點(diǎn)擊查看demo。

clip-path屬性確實(shí)是Shape屬性的好伙伴，因?yàn)樗梢詭椭癸@被創(chuàng)建的形狀，摳掉元素上所有不再形狀內(nèi)部的部分。你自然會(huì)經(jīng)常發(fā)現(xiàn)把clip-path個(gè)Shape屬性結(jié)合使用。

polygon函數(shù)還接受一個(gè)可以可選的參數(shù)fill，有兩個(gè)值，nonzero和even odd。指明如何對(duì)待多邊形自己內(nèi)部的交錯(cuò)區(qū)域。更多信息可以查看SVG fill-rule。

使用圖片定義Shape

像素的alpha通道的值是否超過(guò)某個(gè)臨界值，這是定義形狀的依據(jù)。默認(rèn)的臨界值是0.0（完全透明），你也可以通過(guò)shape-image-threshold屬性來(lái)定義。因此，所有不透明的像素點(diǎn)都是形狀的一部分。

有可能，新版的CSS Shape不但可以使用alpha通道，還可以使用亮度。果真如此的話，shape-image-threhold將被擴(kuò)展，支持亮度或者alpha通道，基于不同狀態(tài)間的切換。

我們將使用下面這張圖，定義元素的形狀，讓文本環(huán)繞之：

使用shape-outside屬性，傳遞一個(gè)url值，指向我們想要的圖片。

.leaf-shaped-element {
    float: left;
    width: 400px;
    height: 400px;
    shape-outside: url(leaf.png);
    shape-margin: 15px;
    shape-image-threshold: 0.5;
    background: #009966 url(path/to/background-image.jpg);
    mask-image: url(leaf.png);
}

當(dāng)然，如果元素有背景圖片的話，需要把形狀之外的部分去掉。不過(guò)clip-path無(wú)法接受一張帶透明度的圖片座位參數(shù)，我們 可以使用Masking Module的mask-image（需要對(duì)應(yīng)的前綴）屬性來(lái)實(shí)現(xiàn)。看看效果：

如果你需要?jiǎng)?chuàng)建一個(gè)復(fù)雜的形狀，推薦你使用圖片來(lái)定義。你可以通過(guò)Photoshop來(lái)定義alpha通道，比起手動(dòng)指定定點(diǎn)方便多了。

還有，如果你元素上又多個(gè)浮動(dòng)或者多個(gè)被排除的區(qū)域，你更愿意使用圖片而不是形狀。因?yàn)椋辽偈乾F(xiàn)在，你無(wú)法在一個(gè)元素上定義多個(gè)形狀。但是如果圖片包含多個(gè)區(qū)域，瀏覽器可以把這些區(qū)域提取出來(lái)并使用之。

響應(yīng)式設(shè)計(jì)中的CSS Shape

不過(guò)shape-inside還不是響應(yīng)式的，原因是它被推遲到了Module Level 2中。當(dāng)前版本中不盡人意的地方將在下一版本中解決。

Shape工具

Adobe Web平臺(tái)開(kāi)發(fā)組開(kāi)發(fā)出了一個(gè)更高級(jí)，交互式的Shape工具。這個(gè)工具最近作為Brackets編輯器的一個(gè)插件公布出來(lái)，Brackets編輯器是Adobe團(tuán)隊(duì)打造的一個(gè)免費(fèi)編輯器。它允許你直接在瀏覽器中可視化地編輯圖形，還包含一個(gè)預(yù)覽版的功能——在你在頁(yè)面上編輯圖形的同時(shí)，更新編輯器中的樣式表。這給你提供了直接視覺(jué)反饋，可以讓你看到你的形狀是如何與頁(yè)面上的其他元素交互的。

使用Brackets的預(yù)覽模式，在右邊的瀏覽器中編輯多邊形。截圖由Razvan Caliman提供。

這個(gè)工具不可或缺，因?yàn)樗蟠蠛?jiǎn)化了形狀的創(chuàng)建、編輯和調(diào)試。 Razvan Caliman再Brackets的博客上發(fā)布了一篇文章，說(shuō)明如何再Brackets中使用Shape編輯器。

未來(lái)：CSS Exclusion

將來(lái)，CSS Exclusion允許我們像引文一樣讓文本環(huán)繞著形狀，如這張雜志的布局所示。引文甚至可以是圓形的，文本也可以很好的環(huán)繞在它周圍。圖片來(lái)自Justin Thomas Kay。

類似的布局，具有形狀的元素絕對(duì)定位在文本在中間——四面都有文本環(huán)繞——將來(lái)也沒(méi)什么不可能。

將來(lái)的CSS Shape

現(xiàn)在你就可以使用CSS Shape，作為漸進(jìn)增強(qiáng)的一部分，確保在不支持的瀏覽器中可以優(yōu)雅的降級(jí)。我最近開(kāi)始把它們用在我自己的網(wǎng)站上，降級(jí)很”正常”。對(duì)于更加復(fù)雜的設(shè)計(jì)，你可以使用腳本來(lái)檢測(cè)瀏覽器是否支持Shape，提供降級(jí)方案。你也可以使用這段腳本擴(kuò)展Modernizr的測(cè)試集，來(lái)測(cè)試瀏覽器是否支持shape-outside，也可以直接下載一份自定義的包含了這個(gè)測(cè)試的版本。

CSS Shape填平了印刷排版和Web設(shè)計(jì)之間的溝壑。本文中的示例都很簡(jiǎn)單，不過(guò)你應(yīng)該學(xué)到的這些基礎(chǔ)，有助于你實(shí)現(xiàn)像雜志或者海報(bào)一樣復(fù)雜的設(shè)計(jì)——無(wú)需擔(dān)心你還需要針對(duì)屏幕重新設(shè)計(jì)。無(wú)論你在尋找什么——從非矩形布局到Shape動(dòng)畫——馬上開(kāi)始實(shí)驗(yàn)吧。

原文：CSS Shapes 101 · An A List Apart Article

— 完 —

之前也有寫過(guò) CSS 優(yōu)惠券樣式《CSS3徑向漸變實(shí)現(xiàn)優(yōu)惠券波浪造型》，這次再來(lái)溫習(xí)一遍，并且將更為詳細(xì)的講解，從布局到具體樣式說(shuō)明，最后定義 CSS 變量，自定義主題顏色。

布局

布局 其實(shí)是學(xué)習(xí)前端的重要部分，最常用的方式就是從上而下、從左而右、亦或者兩個(gè)相結(jié)合。

看上圖，而這里，我們就只是最簡(jiǎn)單的布局方式，從上而下：

1、優(yōu)惠券金額和過(guò)期時(shí)間

2、優(yōu)惠券描述

3、按鈕（其實(shí)按鈕也可以放到“2”里面去）

這樣分析，我們就有了 html 架構(gòu)了

<div class="coupon">
  <!-- 1、優(yōu)惠券金額和過(guò)期時(shí)間 -->
  <div class="price">
    100元
    <span>優(yōu)惠券</span>
    <p class="timeout">2020-12-31 18:18:18過(guò)期</p>
  </div>

  <!-- 2、優(yōu)惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、過(guò)期作廢</p>
  </div>

  <!-- 3、按鈕 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS修飾

接下來(lái)我們用 CSS 美化我們的 html 。同理，我們也根據(jù)布局分步進(jìn)行樣式書寫。

1、優(yōu)惠券金額和過(guò)期時(shí)間樣式

這里的核心就是上方的凹槽和下方的鋸齒

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css變量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

這里用到了 徑向漸變，不清楚用法的小伙伴可以看看語(yǔ)法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

注釋：

（1）、shape 確定圓的類型:

ellipse (默認(rèn)): 指定橢圓形的徑向漸變。

circle ：指定圓形的徑向漸變

（2）、size 定義漸變的大小，可能值：

farthest-corner (默認(rèn)) : 指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角

closest-side ：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊

closest-corner ： 指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角

farthest-side ：指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊

（3）、position 定義漸變的位置。可能值：

center（默認(rèn)）：設(shè)置中間為徑向漸變圓心的縱坐標(biāo)值。

top：設(shè)置頂部為徑向漸變圓心的縱坐標(biāo)值。

bottom：設(shè)置底部為徑向漸變圓心的縱坐標(biāo)值。

（4）、start-color, ..., last-color 用于指定漸變的起止顏色。

這樣價(jià)格上方的凹槽就有了，接下來(lái)下方的鋸齒我們也可以用 徑向漸變 的方式實(shí)現(xiàn)：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

偽類元素 ::after 設(shè)置徑向漸變背景為一個(gè)圓，后進(jìn)行平鋪就形成了鋸齒，調(diào)整位置。

其實(shí)還有更簡(jiǎn)單的方法，可以直接用一個(gè)虛線邊框即可搞定，請(qǐng)看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

當(dāng)然也有缺陷，間隔位置不好控制

2、優(yōu)惠券描述與按鈕 優(yōu)惠券核心鋸齒已經(jīng)搞定了，下面都是小菜啦，非常簡(jiǎn)單咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按鈕樣式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

主題顏色

大家都看到了，我們上方代碼主要顏色都采用的變量，而且變量是定義在 .coupon 類選擇器里面的。這樣的原因是：

1、CSS變量作用域（CSS變量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主題使用

ok，我們就可以copy 多個(gè) 優(yōu)惠券，并給每個(gè)添加一個(gè)不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下來(lái)我們就為不同主題定義不同的顏色變量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

這樣，theme1主題下的優(yōu)惠券，就是紫色主題，theme2主題下的優(yōu)惠券，就是藍(lán)色主題...，而默認(rèn)主題顏色就是我們 .coupon 類選擇器里面的定義的變量顏色（紅色）。

小結(jié)

今天你學(xué)到了嗎？從布局分析到具體實(shí)現(xiàn)，再到主題顏色，相信小伙伴們都各有所得。