整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
擇DOM元素
如果熟悉jQuery，就會知道 $('.class') 和 $('#id') 選擇器有多么重要。它們根據(jù)與之關(guān)聯(lián)的類或 ID 選擇 DOM 元素。但是當(dāng)你沒有引用 jQuery時(shí)，你仍然可以在谷歌開發(fā)控制臺中進(jìn)行同樣的操作。
$('tagName') $('.class') $('#id') and $('.class #id') 等效于document.querySelector(' ')，這將返回 DOM 中與選擇器匹配的第一個(gè)元素。
也可以使用 $$(tagName) 或 $$(.class), 注意雙元符號，根據(jù)特定的選擇器選擇DOM的所有元素。這也將它們放入數(shù)組中，你也可以通過指定數(shù)組中該元素的位置來從中選擇特定的元素。
例如，$$('.className') 獲取具有類 className 的所有元素，而$$('.className')[0]和 $$('.className')[1]獲取到分別是第一個(gè)和第二個(gè)元素。
將瀏覽器轉(zhuǎn)換為編輯器
你有多少次想知道你是否可以在瀏覽器中編輯一些文本？ 答案是肯定的，你可以將瀏覽器轉(zhuǎn)換為文本編輯器。 你可以在 DOM 中的任何位置添加文本和從中刪除文本。你不再需要檢查元素并編輯HTML。相反，進(jìn)入開發(fā)人員控制臺并輸入以下內(nèi)容:
document.body.contentEditable=true
這將使內(nèi)容可編輯。現(xiàn)在，你幾乎可以編輯DOM中的任何內(nèi)容，還在等什么，快去試試吧。
查找與DOM中的元素關(guān)聯(lián)的事件
調(diào)試時(shí)，需要查找 DOM 中某個(gè)元素的事件偵聽器感時(shí)，谷歌控制臺用了 getEventListeners使找到這些事件更加容易且直觀。
getEventListeners($(‘selector’)) 返回一個(gè)對象數(shù)組，其中包含綁定到該元素的所有事件。你可以展開對象來查看事件:
查找與DOM中的元素關(guān)聯(lián)的事件
要找到特定事件的偵聽器，可以這樣做:
getEventListeners($(‘selector’)).eventName[0].listener
這將顯示與特定事件關(guān)聯(lián)的偵聽器。這里 eventName[0] 是一個(gè)數(shù)組，它列出了特定事件的所有事件。例如:
getEventListeners($(‘firstName’)).click[0].listener
將顯示與 ID 為 'firstName' 的元素的單擊事件關(guān)聯(lián)的偵聽器。
監(jiān)控事件
如果希望在執(zhí)行綁定到 DOM 中特定元素的事件時(shí)監(jiān)視它們，也可以在控制臺中這樣做。你可以使用不同的命令來監(jiān)控其中的一些或所有事件:
檢查 DOM 中的一個(gè)元素
你可以直接從控制臺檢查一個(gè)元素:
檢索最后一個(gè)結(jié)果的值
你可以將控制臺用作計(jì)算器。當(dāng)你這樣做的時(shí)候，你可能需要用第二個(gè)來跟蹤一個(gè)計(jì)算。以下是如何從內(nèi)存中檢索先前計(jì)算的結(jié)果:
$_
過程如下：
2+3+4
9 //- The Answer of the SUM is 9
$_
9 // Gives the last Result
$_ * $_
81 // As the last Result was 9
Math.sqrt($_)
9 // As the last Result was 81
$_
9 // As the Last Result is 9
清除控制臺和內(nèi)存
如果你想清除控制臺及其內(nèi)存，輸入如下：
clear()
推薦
代碼部署后可能存在的BUG沒法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。
繼續(xù)上一篇文章的繼續(xù)了解css的基礎(chǔ)知識，關(guān)注我微信公眾號：全棧學(xué)習(xí)筆記
font-family:微軟雅黑;/*字體名稱（類型）：微軟雅黑，黑體，楷體，宋體*/
font-size: 20px;/*字體大小*/
font-weight: 600;/*字體加粗*/
font-style: italic;/*字體樣式*/
background: #00FF00 url(bgimage.gif) no-repeat fixed top;/*這是融合在一起的寫法*/
background-color: red;/*背景顏色*/
background-image:url('圖片路徑');/*背景圖片*/
background-repeat:no-repeat;/*背景圖片是否允許重復(fù)no-repeat repeat*/
background-attachment:fixed;/*規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動*/
background-origin:content-box;/*規(guī)定背景圖片的定位區(qū)域。*/
/*background-position:50% 50%;*/
/*background-position:800px 300px;*/
background-position:right center;/*規(guī)定背景圖像的位置*/
background: inherit;/*規(guī)定應(yīng)該從父元素繼承 background 屬性的設(shè)置。*/
.text{
color:rebeccapurple;/*字體顏色*/
direction: ltr;/*字體方向從右向左*/
/*rtl 從左向右*/
line-height: 5px;/*設(shè)置行高*/
letter-spacing:2px;/*設(shè)置字符間的間距，注意是字符，或者是字母*/
text-align:center;/*設(shè)置文本的對齊方式*/
text-decoration:overline;/*字體的修飾，如下劃線underline，上劃線overline，
刪除線line-through，也可以設(shè)置為none，無修飾*/
text-indent:2em;/*首行縮進(jìn)2個(gè)字，還有其他px的單位，%也可以*/
text-shadow: rosybrown;/*文本陰影*/
text-transform: lowercase;/*屬性控制文本的大小寫 */
/*capitalize 文本中的每個(gè)單詞以大寫字母開頭。*/
/*uppercase 定義僅有大寫字母。*/
/*inherit 規(guī)定應(yīng)該從父元素繼承 text-transform 屬性的值。*/
white-space: nowrap;/*屬性設(shè)置如何處理元素內(nèi)的空白 */
/*nowrap 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。*/
/*pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。*/
/*pre-wrap 保留空白符序列，但是正常地進(jìn)行換行。*/
word-spacing:2px;/*屬性增加或減少單詞間的空白,注意這是單詞*/
}
如果你已經(jīng)看到了這里，那你應(yīng)該也能繼續(xù)往下面看，碼字不易，點(diǎn)個(gè)關(guān)注吧。我的微信公眾號：全棧學(xué)習(xí)筆記
邊框?qū)傩员容^重要
.border{
border: 2px solid red;/*設(shè)置邊框樣式 寬度為2px 可見 紅色 也可以分開寫*/
border-width: 2px;
border-color: red;
border-style: solid;/*分開寫的border屬性*/
/*也可以這樣設(shè)置*/
border-style:dotted solid double dashed;
/*上邊框是點(diǎn)狀 右邊框是實(shí)線 下邊框是雙線 左邊框是虛線*/
/*
none 無邊框。
hidden 與 "none" 相同。不過應(yīng)用于表時(shí)除外，對于表，hidden 用于解決邊框沖突。
dotted 點(diǎn)狀邊框。
dashed 虛線。。
solid 實(shí)線。
double 雙線。
inherit 規(guī)定應(yīng)該從父元素繼承邊框樣式。
*/
border-radius: 5px;/*設(shè)置邊框弧的大小，值越大，弧度越大*/
/*也可以對border的某一個(gè)邊進(jìn)行設(shè)置屬性*/
border-top: 2px solid red;
}
看到這里你的心情可能是這樣的
但是不要擔(dān)心，如果你覺得很難懂的話，可以私聊我，我給你講懂！
內(nèi)邊距
/*內(nèi)邊距*/
.padding{
padding: 2px;/*盒子模型的外邊距，上左下右 各向內(nèi)縮進(jìn)2px*/
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
/*以上四句等于下面一句 上右下左的順序 值是不一定相等的*/
padding: 2px 2px 2px 2px;
}
外邊距
/*外邊距*/
.margin{
margin: 2px;/*盒子模型的外邊距，和padding的區(qū)別就是，margin是向外擴(kuò)展的，padding是向內(nèi)擴(kuò)展的*/
margin-top: 2px;
margin-right: 3px;
margin-bottom: 4px;
margin-left: 6px;
/*上面四句和下面一句也是等效的*/
margin:2px 3px 4px 6px;
}
如果你是新手的話可能對盒子模型，外邊距內(nèi)邊距都不熟悉，這一部分內(nèi)容在學(xué)的時(shí)候相對來說比較吃力！如果有問題可以私聊或者留言評論給我，我?guī)湍憬鉀Q哦！
這一部分用的比較少，了解一點(diǎn)就行
/*鼠標(biāo)樣式屬性*/
.cursor{
cursor: pointer;/*光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）*/
/*help 此光標(biāo)指示可用的幫助（通常是一個(gè)問號或一個(gè)氣球）
text 此光標(biāo)指示文本。
wait 此光標(biāo)指示程序正忙（通常是一只表或沙漏
default 默認(rèn)光標(biāo)（通常是一個(gè)箭頭）
auto 默認(rèn)。瀏覽器設(shè)置的光標(biāo)。
*/
}
/*列表屬性*/
.list{
list-style: circle;
list-style:square inside url('/test/1.png');
list-style-type: disc;/*設(shè)置列表項(xiàng)標(biāo)記的類型*/
/*disc 默認(rèn)。標(biāo)記是實(shí)心圓。
circle 標(biāo)記是空心圓。
square 標(biāo)記是實(shí)心方塊。
decimal 標(biāo)記是數(shù)字。*/
list-style-image: url();/*屬性使用圖像來替換列表項(xiàng)的標(biāo)記*/
list-style-position: inside;/*屬性設(shè)置在何處放置列表項(xiàng)標(biāo)記*/
}
定位屬性一般來說用得比較多，希望你能看懂下面的代碼
.position{
position: relative;
left: 2px;
top: 2px;
}
代碼中的意思是相對定位，相對定位就是說，相對于我本身元素的位置，再對這個(gè)元素進(jìn)行移動。所以以上代碼的意思就是相對于這個(gè)元素原來所在的位置，再向右移動2px，向下移動2px，要注意這一點(diǎn)，代碼中寫的left，top 都是正值，也就是向相反的方向移動。而不是向左移動2px,向上移動2px.
.positionA{
position: absolute;
left: 20px;
right: 20px;
}
以上為絕對定位，絕對定位是相對于整個(gè)頁面來說的，不管元素本身所在的位置。頁面上的最左上角代表(0,0)坐標(biāo)，絕對定位的起始位置也是這里。所以上面這段代碼實(shí)現(xiàn)的就是距離左邊20px,距離上邊20px，這樣理解可能比上面我說的以相反的方向移動要簡單很多吧。
css里面浮動用的還是挺多的，要好好學(xué)哦！不會的關(guān)注我的公眾號，我會教你的哦！公眾號:全棧學(xué)習(xí)筆記 碼字太難了！給個(gè)關(guān)注吧！
說實(shí)話，浮動這一塊講著就很麻煩了，這里只介紹一下，后面出一期上面說的盒子模型的時(shí)候?qū)ｉT講一下浮動，不然講著可能會有一點(diǎn)抽象，你也覺得不好懂！下期我盡量講的詳細(xì)一點(diǎn)。圖文并茂，哈哈，這一期基本上都是代碼文字?jǐn)⑹?。作為一個(gè)知識的存儲。往下面看！
/*浮動*/
.float{
float: right;
}
這句話的意思是將這個(gè)塊（暫時(shí)稱為一個(gè)塊吧）浮動到右邊，或是移動。浮動涉及的東西挺多的，有時(shí)候能用浮動，有時(shí)候用浮動比較麻煩！
1.第一種方式
/*清除浮動*/
.float{
float: right;
clear: both;
}
2.第二種方式
父容器使用overflow：auto。
3.第三種方式
父容器使用偽類after和zoom。
偽類選擇器還沒講過，爭取這兩天寫一份詳細(xì)的選擇器文章。
滾動條設(shè)置
/*滾動條*/
.overflow{
overflow:scroll;/*屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。*/
/*
visible 默認(rèn)值。內(nèi)容不會被修剪，內(nèi)容溢出容器。
hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的,不會出現(xiàn)滾動條。
scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條。
auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條。
inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
*/
overflow-y: hidden;/*設(shè)置豎直的滾動條*/
overflow-x: scroll;/*設(shè)置橫向的滾動條*/
}
樣式隱藏分為占位隱藏以及非占位隱藏
.display-z{
/*隱藏*/
display: none;
/*以塊級元素顯示，寬高不可忽略*/
display: block;
/*此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符*/
display: inline;
}
所謂非占位隱藏就是說，使用這個(gè)屬性后，這個(gè)元素是不會被渲染，也就不會被看到。
/*占位隱藏*/
.visibility{
/*隱藏*/
visibility: hidden;
/*顯示*/
visibility: visible;
}
而占位隱藏的意思就是，雖然這個(gè)元素我們看不到，但是他其實(shí)已經(jīng)被渲染出來了，只是被隱藏了，就像科幻片里面的隱身一樣。
好了，這期的教程就到這里了！里面有一些重要很實(shí)用的東西沒有具體的說，等css基礎(chǔ)教程更新完成，就會出一些實(shí)用教程！希望大家支持哦！
靠CSS 就寫出創(chuàng)意十足的設(shè)計(jì)是很困難的。到目前為止，就創(chuàng)建視覺特效而言，CSS 這門語言還是存在諸多限制。想用CSS 寫出Photoshop 般的效果，還差得很遠(yuǎn)，個(gè)別情況下仍需要各種奇奇怪怪的招術(shù)助陣。
以前，要繞過種種限制，不得不犧牲簡潔性（加入大量元素，只為了展示效果的細(xì)節(jié)），或者犧牲性能（為了展現(xiàn)視覺效果，頁面中放了太多圖片及JavaScript）。
今天，我們就來介紹幾種能夠通過CSS 實(shí)現(xiàn)的特效。其中用到的一些CSS 特性還很新，瀏覽器支持不充分，但也有非常成熟的。很多特性在SVG 中已經(jīng)存在很多年了，最近才加入到CSS 中。
這些技術(shù)能夠提升你的設(shè)計(jì)，就像做菜添加了調(diào)味料，平淡無奇的一盤菜也能頓時(shí)濃香四溢。使用它們的時(shí)候也得小心謹(jǐn)慎，必須考慮漸進(jìn)式增強(qiáng)。另外也要知道，其中一些技術(shù)會有相關(guān)的bug。即使在支持它們的瀏覽器中，它們也通常還并不成熟。
圖1 展示了一個(gè)頁面（一些天體的介紹），其中包含很多視覺特效。就在幾年前，要通過CSS 實(shí)現(xiàn)這些效果幾乎是不可能的。整個(gè)頁面布局，就算能做出來，也要借助大量圖片和額外的HTML 元素。
今天，這些效果已經(jīng)能夠在很多瀏覽器中通過CSS 來呈現(xiàn)了，即使做不到也能平穩(wěn)地退化為可用版本。在一個(gè)頁面上集成大量視覺特效仍須謹(jǐn)慎，因?yàn)榭赡茉斐尚阅荛_銷，代價(jià)有大有小。
盡管如此，通過CSS 來完成它們?nèi)匀挥泻芏嗪锰?，因?yàn)榭梢詼p少不必要的標(biāo)記，而且維護(hù)起來比較容易。此外，隨著瀏覽器支持相應(yīng)的規(guī)范，性能也會越來越好。
圖1 使用了很多視覺特效的頁面
接下來，我們就以這個(gè)“觀星指南”頁面作為例子，逐個(gè)講解其中涉及的技術(shù)點(diǎn)。
大家可能都知道，網(wǎng)頁布局基本上都是由矩形構(gòu)成的，CSS Shapes 是一個(gè)新標(biāo)準(zhǔn)，旨在讓W(xué)eb 設(shè)計(jì)者能使用各種形狀。形狀元素不僅會影響界面的外觀，還會影響頁面的內(nèi)容流。
細(xì)說形狀
CSS Shapes 包含兩組新屬性，一組用于設(shè)置影響盒子中內(nèi)容的形狀，另一組用于設(shè)置影響形狀元素周邊內(nèi)容流的形狀。在圖2 中，我們看到一個(gè)被設(shè)置為圓形的形狀。其中左邊的圖形展示了外部形狀如何影響周邊的內(nèi)容，而右邊的圖形展示了圓形中的內(nèi)容如何受到內(nèi)部形狀的影響。
圖2 外部形狀與內(nèi)部形狀
這兩種形狀分別由不同級別的CSS Shapes 規(guī)范定義。其中shape-outside 屬性（在CSS Shapes Level 1 中定義）是唯一相對比較成熟的。本文不涉及shape-inside，因?yàn)槟壳斑€沒有瀏覽器實(shí)現(xiàn)它，也許在不久的將來會有吧。
shape-outside 屬性只能應(yīng)用給浮動元素。這個(gè)屬性不改變元素自身的外觀，只會通過設(shè)置形狀影響其外部內(nèi)容流。
在我們例子中的“Moon”部分，通過設(shè)置shape-outside: circle();實(shí)現(xiàn)了文本流環(huán)繞月亮圖片的效果（見圖3）。
.fig-moon {
float: right;
max-width: 40%;
shape-outside: circle();
}
圖3 文本圍繞月亮圖片周圍的圓形實(shí)現(xiàn)了繞排
在解釋形狀構(gòu)造原理之前，先了解一下shape-outside 如何影響布局。圖片文件本身的背景是黑色的，如果把這一區(qū)塊的背景改成其他顏色，我們會看得更清楚（見圖4）。圖片本身還是方形的，但文本流環(huán)繞著其中的圓形。在不支持CSS 形狀的瀏覽器中，文本會像往常一樣環(huán)繞矩形。
注意：如圖4 所示，文本流只繞排在浮動元素的左側(cè)。只能讓形狀的一側(cè)影響文本的行盒子。即使形狀右側(cè)有空間，文本也不會填進(jìn)去。
1. 形狀函數(shù)
前面例子中的shape-outside 屬性使用了一個(gè)值：circle()。這是一個(gè)形狀函數(shù)，類似的形狀函數(shù)還有ellipse()、polygon()、inset()。前兩個(gè)分別用于定義橢圓形和多邊形，inset()則表示嵌入在盒子邊界內(nèi)的矩形，也可以指定圓角，算是CSS 2.1 中clip 屬性的加強(qiáng)版，只是語法不同而已。
此處圓形和橢圓形的語法，類似于第5 章的放射性漸變的大小及位置的語法：
.shape-circle {
/* 圓形接受一個(gè)半徑值和一個(gè)位置值 */
shape-outside: circle(150px at 50%);
}
.shape-ellipse {
/* 橢圓形接受兩個(gè)半徑值和一個(gè)位置值 */
shape-outside: ellipse(150px 40px at 50% 25%);
}
與漸變函數(shù)類似，圓形和橢圓形函數(shù)也有合理的默認(rèn)值。前面月亮圖片的circle()函數(shù)并未傳入?yún)?shù)，而默認(rèn)的參數(shù)是以元素中心為圓心，以最近邊為半徑。
inset()函數(shù)需要傳入一組長度值，分別表示到上、右、下、左邊的距離，很像margin 和padding 簡寫。同樣，1~3 個(gè)值的外邊距和內(nèi)邊距簡寫規(guī)則在這里也適用。此外，還可以通過round關(guān)鍵字指定圓角，隨后是半徑值，與border-radius 屬性的類似：
.shape-inset {
/* 距離外部盒子的上、下邊各20 像素，
* 距離外部盒子的左、右邊各30 像素，
* 還有半徑為10 像素的圓角
*/
shape-outside: inset(20px 30px round 10px);
}
相對復(fù)雜一些的是polygon()函數(shù)。這個(gè)函數(shù)接受一系列坐標(biāo)對，用于在盒子表面指定多個(gè)點(diǎn)，坐標(biāo)相對于盒子的左上角，最終把各個(gè)點(diǎn)連接起來就是要?jiǎng)?chuàng)建的形狀。在“Planets”部分，我們?yōu)橥列莿?chuàng)建了一個(gè)多邊形。
創(chuàng)建多邊形最簡單的一種方式就是使用CSS Shapes Editor 插件，它支持Chrome 和Opera。Chrome 和Opera 都支持CSS Shapes，而且會在檢查形狀元素時(shí)給出預(yù)覽。這個(gè)插件會添加額外的工具，因此既可以通過它看到形狀如何影響頁面，也可以通過創(chuàng)建并拖動控制點(diǎn)來創(chuàng)建新形狀（見圖5）。
圖5 在Chrome 中通過Shapes Editor 插件繪制的形狀
然后就可以把得到的多邊形復(fù)制粘貼到代碼中：
.fig-planet {
float: right;
max-width: 65%;
shape-outside: polygon(41.85% 100%, 22.75% 92.85%, 5.6% 73.3%, 0.95% 52.6%, 5.6% 35.05%,
21.45% 17.15%, 37.65% 12.35%, 40% 0, 100% 0%, 100% 100%);
}
多邊形中每個(gè)點(diǎn)的坐標(biāo)以百分比表示，這樣可以保證最大的靈活度。當(dāng)然也可以在這里使用任意長度值，比如像素、em，甚至calc()表達(dá)式。
2. 形狀圖片
基于復(fù)雜的圖片創(chuàng)建多邊形會非常麻煩。好在我們可以直接在圖片的源文件上基于透明度來創(chuàng)建形狀。比如，可以比照預(yù)期的形狀新創(chuàng)建一張圖片。但土星的圖片已經(jīng)是帶透明度的PNG格式了，因此可以直接通過它來生成形狀。我們要做的就是把shape-outside 的值由polygon()函數(shù)修改為指向該圖片的url()函數(shù)：
.fig-planet {
float: right;
max-width: 65%;
shape-outside: url(img/saturn.png);
}
如果在Chrome 開發(fā)者工具里檢查這張圖片，會看到如圖6 所示的模樣。可以看到，圖片的透明度數(shù)據(jù)被用于生成形狀了。
圖6 圖片透明區(qū)域的輪廓被用于生成形狀
提示：只通過瀏覽器打開HTML 文件是不行的，就算瀏覽器支持CSS Shapes 也不行。必須通過Web 服務(wù)器取得這個(gè)頁面，這樣引用的圖片才會帶有合適的HTTP 首部信息，告訴瀏覽器該圖片與CSS 來自同一個(gè)域。這種安全機(jī)制是較新的瀏覽器才有的，是為了防止引用的文件對你的計(jì)算機(jī)造成危害。
默認(rèn)情況下，形狀輪廓會沿圖片完全透明區(qū)域的邊緣生成，但這個(gè)值可以通過shape-imagethreshold 屬性來修改。默認(rèn)值是0.0（完全透明），而較大的值（最大為1.0）意味著較高的不透明度也可以用于生成形狀邊界。比如，修改土星圖片的不透明度閾值為0.9，則半透明的土星環(huán)將不再被包含在形狀內(nèi)，結(jié)果文本會覆蓋其上（見圖7）。
.fig-planet {
float: right;
max-width: 65%;
shape-outside: url(img/saturn.png);
shape-image-threshold: 0.9;
}
圖7 使用shape-image-threshold 提高不透明度閾值后，原來圖片中半透明的部分在生
3. 形狀盒子與邊距
除了使用形狀函數(shù)或圖片，還可以使用元素的參照盒子來生成形狀。乍一聽好像有點(diǎn)不對，畢竟元素盒子都是方形的。不過，形狀也能依照圓角生成。
比如，以前面的月亮圖片為例，如果我們想改變區(qū)塊背景的顏色，同時(shí)也去掉圖片周圍的黑色區(qū)域（如圖11-8 所示），那么可以在圖片上使用border-radius 來創(chuàng)建圓形。
.fig-moon {
float: right;
max-width: 40%;
border-radius: 50%;
}
圖8 給月亮圖片應(yīng)用border-radius
僅有圓角邊框還不能生成形狀，還得通過shape-outside 屬性告訴瀏覽器，以border-box作為生成形狀的依據(jù)。
.fig-moon {
float: right;
max-width: 40%;
border-radius: 50%;
shape-outside: border-box;
}
這樣外部形狀就變成了環(huán)繞元素邊框盒子的圓形。其他能生成形狀的參照盒子還有content-box、padding-box 和margin-box。margin-box 是個(gè)例外。因?yàn)樾螤钍腔诟訁^(qū)域的，浮動區(qū)域也包含外邊距，所以這個(gè)關(guān)鍵字是專門為形狀定義的，并沒有box-sizing: margin-box 這種用法。
對于形狀而言，參照盒子為margin-box 時(shí)，形狀仍然會參照圓角邊框，但這樣一來就可以像定義常規(guī)的外邊距一樣，給月亮圖片周圍添加一些邊距了。
.fig-moon {
float: right;
max-width: 40%;
border-radius: 50%;
shape-outside: margin-box;
margin: 2em;
}
這樣，文本會環(huán)繞著弧形的外邊距形狀排布。如果在Chrome 開發(fā)者工具中檢查圖片，可以看到此時(shí)形狀的樣子，還有原始的外邊距（見圖9）。
圖9 將margin-box 作為形狀的參照后，可以為形狀設(shè)置外邊距
如果想給更復(fù)雜的土星圖片添加外邊距，可以使用另一個(gè)屬性shape-margin，這個(gè)屬性用于給整個(gè)形狀添加外邊距，與創(chuàng)建形狀的方法無關(guān)（見圖10）。
.fig-planet {
max-width: 65%;
shape-outside: url(img/saturn.png);
shape-margin: 1em;
}
圖10 為土星形狀添加shape-margin 屬性
CSS 形狀雖然可以影響周圍文本流，卻不允許你修改元素自身的外觀。添加圓角邊框只是視覺上改變元素形狀的一種方式。實(shí)際上，通過把元素的部分區(qū)域變透明，是可以影響元素自身形狀的。
剪切（clipping）使用路徑形狀定義硬邊界，可以基于該邊界完全切換元素的可見性。蒙版（masking）不太一樣，它用于將元素的某些區(qū)域設(shè)置為更透明或更不透明。剪切會影響對象的響應(yīng)區(qū)域，而蒙版不會。比如要觸發(fā)懸停，鼠標(biāo)必須移到剪切后元素的可見區(qū)域。而對于加了蒙版的元素，無論鼠標(biāo)下面的區(qū)域是否可見，只要位于該元素上，都會激活:hover 狀態(tài)。
一、剪切
剪切最早是在CSS 2.1 中通過clip 屬性引入的。但這個(gè)屬性只能應(yīng)用給絕對定位的元素，而且只能把這些元素剪切為矩形（使用rect()函數(shù)）。沒勁！
好在新的clip-path 屬性提供了更多選擇。它可以使用CSS 形狀中的基本形狀函數(shù)定義如何剪切元素。它還能使用SVG 文檔剪切元素，只要通過URL 引用一個(gè)<clipPath>元素即可。
下面從使用形狀函數(shù)定義剪切路徑開始。這個(gè)特性之前只有Blink 和WebKit 內(nèi)核的瀏覽器支持，而且除了不加前綴的屬性，還要使用加-webkit-前綴的屬性。為簡單起見，后面的例子只展示不加前綴的標(biāo)準(zhǔn)屬性。
“觀星指南”頁面中的所有區(qū)塊都是被剪切過的，因此都有一些向?qū)蔷€傾斜（見圖11）。
圖11 頁面中的所有區(qū)塊都被剪切過，因此都有點(diǎn)傾斜
每個(gè)區(qū)塊都有一個(gè)stacked 類，其中使用多邊形函數(shù)指定了剪切路徑：
.stacked {
clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0% 100%);
}
這個(gè)多邊形沒有前面土星的多邊形復(fù)雜，因此可以稍微深入地講解一下。多邊形中的每一個(gè)點(diǎn)都對應(yīng)著一對空格分隔的值，值對之間以逗號隔開。
先從左上角開始，0 3vw 表示x 軸剪切長度為0，y 軸剪切長度為3vw。這里使用相對視口的單位保證角度以視口大小為參照。接下來的坐標(biāo)是右上角坐標(biāo)100% 0。第三個(gè)100% calc(100% -3vw)指距右下角3vw，它不能使用百分比表示，因?yàn)檫@個(gè)y 軸坐標(biāo)是從上方開始計(jì)算的。最后，左下角的坐標(biāo)是0 100%。
因?yàn)榧羟新窂街挥绊懺劁秩竞蟮耐庥^，而不會影響頁面流，所以剪切后的元素之間會出現(xiàn)透明間隙（見圖11-12）。為消除間隙，可以給每個(gè)堆疊的區(qū)塊應(yīng)用一個(gè)負(fù)外邊距，而且要比3vm稍大一些，好讓相鄰的區(qū)塊邊緣能彼此重疊。但我們只希望在支持clip-path 的瀏覽器中應(yīng)用這個(gè)負(fù)外邊距，這時(shí)候正好可以用上@supports 規(guī)則。因?yàn)檫@些新的特效只在較新的瀏覽器中才存在，所以我們可以放心地這么寫：
@supports ((clip-path: polygon(0 0)) or
(-webkit-clip-path: polygon(0 0))) {
.stacked {
margin-bottom: -3.4vw;
}
}
圖12 如果只應(yīng)用剪切，區(qū)塊之間會出現(xiàn)間隙
在@supports 規(guī)則塊中，我們測試了瀏覽器是否支持最小的多邊形（只有一個(gè)點(diǎn)）。增加這些保障后，區(qū)塊就可以完美地對齊了。而在不支持clip-path 的瀏覽器中，區(qū)塊也會像平常一樣上下相接，不會重疊。
使用SVG
可以使用polygon()、circle()、ellipse()和inset() 函數(shù)創(chuàng)建剪切路徑，與創(chuàng)建CSS形狀一樣。對于復(fù)雜的形狀，建議大家還是使用圖片編輯器來創(chuàng)建，然后再將最終的圖形作為剪切路徑的源。我們在頁面導(dǎo)航中使用的形狀就是這樣生成的，如圖13 所示。
圖13 導(dǎo)航區(qū)中復(fù)雜的形狀是基于SVG 源實(shí)現(xiàn)的剪切
使用圖形作為剪切源，需要先使用SVG 創(chuàng)建剪切路徑，然后再通過一個(gè)URL 引用到形狀函數(shù)中。首先，要在Illustrator、Sketch 或Inkscape 之類的圖形編輯器中創(chuàng)建想要的形狀。雖然不那么簡單，但還是可行的。
導(dǎo)航區(qū)塊本身是一個(gè)包含頁內(nèi)鏈接的無序列表：
<nav class="stacked section nav-section inverted"> <ul class="wrapper"> <li><a href="#moon">The Moon</a></li> <li><a href="#sun">The Sun</a></li> <li><a href="#planets">Planets</a></li> <li><a href="#milky-way">Galaxy</a></li> <li><a href="#universe">Universe</a></li> </ul> </nav>
在此，我們就不涉及導(dǎo)航本身的樣式了，大家只要知道這里用到了Flexbox 水平布局導(dǎo)航項(xiàng)目，將它們固定為100 像素見方的方塊就夠了。
然后，在支持SVG 的圖形編輯器（我們用的是Adobe Illustrator）中創(chuàng)建一張圖片。圖片的大小也是100 像素見方（見圖14）。其中的星球由兩個(gè)黑色的形狀構(gòu)成，一個(gè)圓形和一個(gè)旋轉(zhuǎn)后的橢圓形。接著把這個(gè)圖片保存為SVG 格式，命名為clip.svg。保存過程因編輯器而異，這里
就不說了，我們只關(guān)注大體的流程。
圖14 使用Illustrator 創(chuàng)建的星球圖形
下面在代碼編輯器中打開生成的SVG 文件，看上去大概是這樣的：
<svg xmlns=http://www.w3.org/2000/svg width="100px" height="100px" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="45"/> <ellipse transform="matrix(-0.7553 0.6554 -0.6554 -0.7553 -12.053 54.99)" cx="50" cy="50" rx="63.9" ry="12.8"/> </svg>
為了把這個(gè)圖片轉(zhuǎn)換為剪切路徑，需要把其內(nèi)容包裝在一個(gè)<clipPath>元素中，并添加一個(gè)ID 屬性：
<svg xmlns="SVG namespace" width="100px" height="100px" viewBox="0 0 100 100"> <clipPath id="saturnclip"> <circle cx="50" cy="50" r="40.1"/> <ellipse transform="matrix(0.7084 -0.7058 0.7058 0.7084 -20.7106 49.8733)" cx="50" cy="50" rx="62.9" ry="12.8"/> </clipPath> </svg>
最后，就可以在CSS 中引用clip.svg 中的這個(gè)剪切路徑了：
.nav-section [href="#planets"] {
clip-path: url(img/clip.svg#saturnclip);
}
這樣就可以把多個(gè)剪切源保存在一個(gè)SVG 文件中，然后通過URL 的片段ID 分別引用。
二、蒙版
“觀星指南”頁面的標(biāo)題好像半隱于地球大氣層的后面（見圖15）。這種透明漸隱效果是通過蒙版實(shí)現(xiàn)的。
圖15 頁面標(biāo)題“Stargazing”通過蒙版實(shí)現(xiàn)了漸隱效果
Safari 早在2008 年就實(shí)現(xiàn)了蒙版，使用的是非標(biāo)準(zhǔn)屬性-webkit-mask-image。這個(gè)屬性允許指定一張圖片，并以這張圖片作為加蒙版元素透明度層次的來源。作為蒙版的圖片中，每個(gè)像素都有一個(gè)阿爾法級別（alpha level），也就是透明度。如果蒙版圖片中的像素是透明的，那么加蒙版元素中對應(yīng)的像素也不可見。相反，蒙版圖片中完全不透明的區(qū)域，對應(yīng)的加蒙版元素的區(qū)域也會完全可見。蒙版圖片的顏色與此無關(guān)，因此灰度圖常用作蒙版。
除了圖片，還可以使用CSS 漸變來創(chuàng)建蒙版。頁面標(biāo)題的蒙版效果就是這么做的：
.header-title {
mask-image: radial-gradient(ellipse 90% 30% at 50% 50%,
rgba(0,0,0,0) 45%,
#000 70%);
mask-size: 100% 200%;
}
相信大家都了解這個(gè)語法：mask-image 后面的值非常類似background-image 屬性的值，甚至也可以聲明多個(gè)蒙版。
除了指定蒙版圖片，還可以指定蒙版的大小和位置。對于我們這個(gè)例子而言，為了把蒙版放到文本底部，我們將它的高度聲明為兩倍，而沒有使用定位。如果我們在這里簡單地把漸變圖片移動到下面，那么蒙版圖片的上半部分就會是透明的，結(jié)果就是文本的上半部分不可見。圖16展示了漸變蒙版的大小和位置，以及它與文本的相對位置關(guān)系。
圖16 蒙版圖片看起來就像是位于文本上方
在WebKit 最初實(shí)現(xiàn)的基礎(chǔ)上，蒙版相關(guān)的屬性得以標(biāo)準(zhǔn)化和擴(kuò)展，同時(shí)也支持了對應(yīng)的SVG效果。沒錯(cuò)，就像clip-path 一樣，SVG 中的蒙板也可以應(yīng)用給HTML 內(nèi)容。
.header-title {
/*嵌入頁面中的CSS，指向嵌入同一頁面中的SVG <mask>元素*/
mask: url(#ellipseMask);
}
與前面CSS 漸變等價(jià)的SVG 標(biāo)記如下：
<mask id="ellipseMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<radialGradient id="radialfill" r="0.9" cy="1.1">
<stop offset="45%" stop-color="#000"/>
<stop offset="70%" stop-color="#fff"/>
</radialGradient>
</mask>
與剪切路徑一樣，這里也需要使用objectBoundingBox 坐標(biāo)系，按照0~1 的比例尺將蒙版縮放到與元素邊界匹配。SVG 蒙版元素本身還有一個(gè)maskContentUnits 屬性，這里也將其設(shè)置為與蒙版形狀相同的坐標(biāo)系。
SVG 蒙版源使用明度值（luminance）而非阿爾法級別來應(yīng)用蒙版。這意味著蒙版較暗的區(qū)域?qū)?yīng)的加蒙版元素區(qū)域會較透明，而蒙版較亮的區(qū)域?qū)?yīng)的加蒙版元素區(qū)域會較不透明。在前面SVG 蒙版的例子中，我們使用了黑白漸變。
瀏覽器會在你使用蒙版圖片時(shí)使用阿爾法級別，在你使用SVG 蒙版時(shí)使用明度值。在對標(biāo)準(zhǔn)的建議中，有一個(gè)mask-type 屬性可以切換這個(gè)應(yīng)用蒙版的依據(jù)值。
另外，-webkit-前綴版與建議的標(biāo)準(zhǔn)版屬性之間也有一些差異。可以參考MDN 中WebKit實(shí)現(xiàn)的完整屬性和語法。
——
本文很大程度上跳出了沉悶單調(diào)的頁面盒子世界。我們探討了如何通過CSS 形狀美化頁面中的元素，以及如何通過剪切路徑畫出視覺邊界。使用蒙版則可以進(jìn)一步控制界面中元素的可見性。
通過這些特效的學(xué)習(xí)，我們也看到了SVG 與CSS 結(jié)合的威力，也極大擴(kuò)展了我們未來設(shè)計(jì)的想象空間。
——本文節(jié)選自《精通CSS：高級Web標(biāo)準(zhǔn)解決方案（第3版）》
CSS暢銷經(jīng)典全面升級
CSS作為Web標(biāo)準(zhǔn)的一部分，是現(xiàn)代網(wǎng)頁設(shè)計(jì)中必不可少的關(guān)鍵元素。鑒于CSS標(biāo)準(zhǔn)化的快速發(fā)展，想要成為CSS高手，打造出令人驚艷、辨識度高的網(wǎng)站，就必須充分了解當(dāng)前CSS規(guī)范各模塊的新特性、新技術(shù)和新思想。
本書是經(jīng)典CSS參考指南，自第1版出版至今一直暢銷不衰。第3版針對當(dāng)前瀏覽器支持度足夠好的CSS特性全面改寫，著眼于如何為更大、更復(fù)雜的網(wǎng)站編寫優(yōu)雅、巧妙、易維護(hù)的代碼。兩位作者均是技術(shù)與寫作才能俱佳的開發(fā)高手，他們將自己對現(xiàn)代CSS實(shí)踐的深刻理解融入書中，結(jié)合大量復(fù)雜實(shí)現(xiàn)情景，清晰展示了如何利用新技術(shù)寫出高度靈活、易維護(hù)和可擴(kuò)展的代碼，并讓這些代碼在不同瀏覽器和不同平臺上跑起來。
第1章 基礎(chǔ)知識
第2章 添加樣式
第3章 可見格式化模型
第4章 網(wǎng)頁排版
第5章 漂亮的盒子
第6章 內(nèi)容布局
第7章 頁面布局與網(wǎng)格
第8章 響應(yīng)式Web設(shè)計(jì)與CSS
第9章 表單與數(shù)據(jù)表
第10章 變換、過渡與動畫
第11章 高級特效
第12章 品控與流程
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
