border
css3在很大程度上拓展了border的樣式，讓我們可以做出更加豐富的效果
border-radius
border-radius屬性是向元素添加圓角邊框。
使用方法
border-radius:10px; /* 所有角都使用半徑為10px的圓角 */
border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */
圓
方法: 把高度(height)和寬度(width)設為相等，并且設置圓角半徑(border-radius)的值與高度(height)的值一致．
div{
height:100px;
width:100px;/*與height相等*/
background:#9da;
border-radius:50px;/*半徑至少設置為height的值*/
}
實心上半圓
方法: 把高度(height)設為寬度（width）的一半，并且只設置左上角和右上角的半徑與元素的高度一致．
div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半徑至少設置為height的值*/
}
課堂任務
- 實現實心左半圓形, 實心左右圓形, 實心下半圓形
- 實現1/4半圓
box-shadow
box-shadow是向盒子添加陰影。支持添加一個或者多個。
box-shadow:inset x-offset y-offset blur-radius spread-radius color
box-shadow屬性至多有6個參數設置
- inset: 陰影類型, 可選參數, 如果不設值，其默認的投影方式是外陰影；如果取其唯一值inset,就是將外陰影變成內陰影
- x-offset: 陰影水平偏移量, 如果為正值, 陰影向左偏移, 如果為負值, 陰影向右偏移
- y-offset: 陰影垂直偏移量, 如果為正值, 陰影向下偏移, 如果為負值,陰影向上偏移
- blur-radius: 模糊半徑, 可選參數, 只能為正值, 數值越大, 模糊效果越明顯
- spread-radius: 擴展半徑, 可選參數, 如果值為正，則整個陰影都延展擴大，反之值為負值是，則縮小
- color: 陰影顏色
關于偏移量
這張圖可以幫助我們記憶偏移量的規則(同樣適用于絕對定位, 元素的移動(translate)等跟位置相關的場景), 我們可以在想象一個坐標軸, 以x-offset為例, 當x-offset為正值的時候, 相當于原點向左移動了, 為負數的時候, 相當與原點向右移動了, y-offset也是同樣的道理
內陰影
div{
height:100px;
width:100px;
border: 1px solid #111;
box-shadow: inset 0px 0px 20px red;
}
外陰影
div{
height:100px;
width:100px;
border: 1px solid #111;
box-shadow: 0px 0px 20px red;
}
單邊陰影
方法: 先設置模糊半徑, 設置擴展半徑為負數, 縮小陰影大小, 直到看不到陰影, 然后將陰影向上移動.
div{
margin: 30px;
width: 200px;
height: 100px;
border: 1px solid #ccc;
box-shadow: 0px -4px 5px -3px red;
}
展示效果:
<p data-height="500" data-theme-id="dark" data-slug-hash="vGzERB" data-default-tab="result" data-user="lulupy" data-embed-version="2" class="codepen">See the Pen <a >vGzERB</a> by lulu (<a >@lulupy</a>) on <a >CodePen</a>.</p>
<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>
多重陰影
div{
width: 200px;
height: 100px;
border: 1px solid #ccc;
margin: 30px;
box-shadow: 0 0 0 1px red,
0 0 0 5px blue,
0 0 0 8px green,
0 0 0 12px yellow,
0 0 0 16px orange,
0 0 0 20px #06c,
0 0 5px 24px lime;/*每個陰影用逗號隔開, 最先定義的顯示在最上面*/
}
綜合應用-3d搜索框
<p data-height="266" data-theme-id="dark" data-slug-hash="PNdwVG" data-default-tab="result" data-user="lulupy" data-embed-version="2" class="codepen">See the Pen <a >PNdwVG</a> by lulu (<a >@lulupy</a>) on <a >CodePen</a>.</p>
<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>
border-image
屬性用來給元素邊框添加背景圖片; 瀏覽器應用了 border-image 則不再應用 border-style.
border-image是由以下幾個屬性組成的:
- border-image-source: none （默認值）
- border-image-slice: 100% （默認值）
- border-image-width: 1 （默認值）
- border-image-repeat: stretch （默認值）
border-image-source（圖片地址）
border-image-source: url(xx.png);
border-image-slice (圖片裁剪)
border-image-slice: [<number> | <percentage>]{1,4} && fill?
取值為長度或百分比（相對于圖片） 分別設置四個變， 簡寫遵循上右下左原則
fill
顯示中間的圖片
border-image-width (圖片邊框大小)
簡寫遵循上右下左原則
取值:
<length>
表示邊框寬度. 可以是絕對長度或相對長度. 不能使用負值。
<percentage>
按照元素的百分比（%）表示邊框寬度. 不能使用負值.
<number>
根據元素 border-width 屬性，用倍數表示邊框寬度. 不能使用負值
border-image-repeat (圖片的排列方式)
或為單個值，設置所有的邊框；或為兩個值，分別設置水平與垂直的邊框。
可選值:
- stretch 拉伸圖片以填充邊框
- repeat 平鋪圖片以填充邊框(從中間向兩邊平鋪,超出部分裁剪)
- round 類似于repeat，不過是整數次平鋪（不會裁剪，而是適當的拉伸圖片）
border-image繪制原理簡述:
共存在兩個九宮格，一個是邊框圖片，還有一個就是邊框本身，九個方位關系一一對應。邊框本身的特性讓其變成了一個九宮格，四條邊框交錯，加上其圍住的區域，正好形成一個九宮格。邊框圖片則是通過圖片剪裁實現了九宮格。這是理解繪制原理的基礎。
調用邊框圖片
border-image的url屬性，通過相對或絕對路徑鏈接圖片。邊框圖片的剪裁
border-image的數值參數剪裁邊框圖片，形成九宮格。剪裁圖片填充邊框
邊框圖片被切割成9部分，以一一對應的關系放到div邊框的九宮格中，然后再壓縮（或拉伸）至（border-image-width）的寬度大小。執行重復屬性
被填充至邊框九宮格四個角落的的邊框圖片是不執行重復屬性的。上下的九宮格執行水平方向的重復屬性（拉伸或平鋪），左右的格子執行垂直方向的重復屬性，而中間的那個格子則水平重復和垂直方向的重復都要執行。
