這節課，我們利用CSS邊框知識完成一些案例。

　　CSS 邊框在網站開發中經常被用到。比如，像這些搜索框、分隔欄、按鈕邊框等等，就連這個小三角都是用邊框制作出來的。

　　http://www.qfedu.com/

　　接下來，我們就使用 CSS 邊框，來制作正方形、三角形、梯形、風車等效果。

　　創建 010-css-case-2 文件夾，在文件夾下創建 case-border.html 文件和 case-2.css 文件。打開 html 文件，構建基礎代碼，引入外部樣式。

　　添加一個 div 元素，定義 id 屬性等于 square。

　　<div id="square"></div>

　　打開 css 文件，定義 #square 選擇器，聲明樣式：width: 150px，height: 150px，border-top: 50px solid red，border-right: 50px solid yellow，border-bottom: 50px solid blue，border-left: 50px solid green。

　　在瀏覽器中查看效果，我們發現，每條邊的交接處，邊框各占一半。

　　打開瀏覽器開發者工具，在 Elements 頁簽下，鼠標滑到 div 元素上，我們發現，這個元素的顯示的寬高為 250。在CSS中，給 div 設置的寬度是150，加上兩個邊框的寬度恰好是 250。

　　因此可以得出結論：樣式中給元素設置的寬高，是不包含該元素邊框寬高的，它只包含元素內容的寬高。

　　如果這個 div 在邊框寬度不變的情況下，收縮內容區域，直到內容全部消失，就是我們要的效果了。

　　要實現這個效果，只要把 div 里樣式的 width 和 height 屬性值設置為 0 就可以了。

　　我們看，效果實現了!

　　有這個作為基礎，實現三角形也容易了。再添加一個 div 元素，定義 id 屬性等于 triangle。

　　再聲明一個 #triangle 選擇器，把正方形的樣式代碼拷貝過來，保留上邊框樣式不變，把其他邊的顏色設置為 transparent。

　　這樣，三角形就做好了。

　　當然，這三行代碼可以簡化為 border: 50px solid transparent。

　　誒，三角形怎么消失了?原來，后面的這句樣式將全部邊框設置為透明，把上面那句樣式給覆蓋了。我們只需要把他們順序顛倒一下即可。此時，對于頂部的邊框，又重新定義了樣式，把上邊定義的頂部邊框樣式又覆蓋回來了。

　　三角形又出現了!

　　這個梯形該如何實現呢?其實也不難。再添加一個 div 元素，定義 id 屬性等于 trapezium。

　　再聲明一個 #trapezium 選擇器，再次把正方形的樣式代碼拷貝過來，把頂邊樣式注釋掉，左邊框顏色設置為透明，右邊框顏色設置為藍色。

　　大功告成，梯形就做好了!

　　再提高點難度，制作一個風車效果。分析一下，這個風車實際上是由四個三角形拼合而成的。

　　再創建一個div，定義屬性 id 等于 windmills。在這個 div 里編寫 emmet 命令：div 中括號 class 等于 box$ 乘以 4 (div[class=box$]*4) ，回車，四個 div 創建好了。

　　定義選擇器 #windmills，給外部的 div 聲明樣式：width: 200px，height: 200px，border: 2px solid gray。

　　定義 #windmills .box1 選擇器，聲明樣式：width: 0，height: 0，border: 50px solid transparent，border-bottom: 50px solid red。

　　將這組樣式拷貝三份，修改選擇器為 box2，box3，box4。我們給四個風車葉編一下號。

　　第一個是底部的三角，顯示的邊框應該是 border-bottom。以此類推，第二個是左側的三角，第三個是右側的三角，第四個是上邊的三角。

　　很顯然，現在還不是風車的效果。仔細觀察，四個 div 各獨占一行，得需要讓他們橫向排列才行。

　　定義一個新的選擇器 #windmills div，給四個 div 聲明樣式：float: left。

　　很神奇，風車的效果完成了!

　　有關浮動的強大功能，我們在后續的課程里還會詳細介紹。這里先把它的功能理解成，可以使容器左右排列即可。

　　回到樣式，我們發現這三句樣式重復寫了四遍，完全可以把他們放到 #windmills div 這個選擇器里。

　　代碼參考：

　　#square {

　　width: 0px;

　　height: 0px;

　　border-top: 50px solid red;

　　border-right: 50px solid yellow;

　　border-bottom: 50px solid blue;

　　border-left: 50px solid green;

　　}

　　#triangle {

　　width: 0px;

　　height: 0px;

　　border: 50px solid transparent;

　　border-top: 50px solid red;

　　/* border-right: 50px solid transparent;

　　border-bottom: 50px solid transparent;

　　border-left: 50px solid transparent; */

　　}

　　#trapezium {

　　width: 0px;

　　height: 0px;

　　/* border-top: 50px solid red; */

　　border-right: 50px solid blue;

　　border-bottom: 50px solid blue;

　　border-left: 50px solid transparent;

　　}

　　#windmills {

　　width: 200px;

　　height: 200px;

　　border: 2px solid gray;

　　}

　　#windmills div {

　　float: left;

　　width: 0;

　　height: 0;

　　border: 50px solid transparent;

　　}

　　#windmills .box1 {

　　border-bottom: 50px solid red;

　　}

　　#windmills .box2 {

　　border-left: 50px solid red;

　　}

　　#windmills .box3 {

　　border-right: 50px solid red;

　　}

　　#windmills .box4 {

　　border-top: 50px solid red;

　　}

上一篇

cookie和session的跨域怎么解決

下一篇

如何應用 CSS 裝飾表單