border
css3在很大程度上拓展了border的樣式，讓我們可以做出更加豐富的效果
border-radius
border-radius屬性是向元素添加圓角邊框。
使用方法
border-radius:10px; /* 所有角都使用半徑為10px的圓角 */
border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時(shí)針 */
圓
方法: 把高度(height)和寬度(width)設(shè)為相等，并且設(shè)置圓角半徑(border-radius)的值與高度(height)的值一致．
div{
height:100px;
width:100px;/*與height相等*/
background:#9da;
border-radius:50px;/*半徑至少設(shè)置為height的值*/
}
實(shí)心上半圓
方法: 把高度(height)設(shè)為寬度（width）的一半，并且只設(shè)置左上角和右上角的半徑與元素的高度一致．
div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半徑至少設(shè)置為height的值*/
}
課堂任務(wù)
- 實(shí)現(xiàn)實(shí)心左半圓形, 實(shí)心左右圓形, 實(shí)心下半圓形
- 實(shí)現(xiàn)1/4半圓
box-shadow
box-shadow是向盒子添加陰影。支持添加一個或者多個。
box-shadow:inset x-offset y-offset blur-radius spread-radius color
box-shadow屬性至多有6個參數(shù)設(shè)置
- inset: 陰影類型, 可選參數(shù), 如果不設(shè)值，其默認(rèn)的投影方式是外陰影；如果取其唯一值inset,就是將外陰影變成內(nèi)陰影
- x-offset: 陰影水平偏移量, 如果為正值, 陰影向左偏移, 如果為負(fù)值, 陰影向右偏移
- y-offset: 陰影垂直偏移量, 如果為正值, 陰影向下偏移, 如果為負(fù)值,陰影向上偏移
- blur-radius: 模糊半徑, 可選參數(shù), 只能為正值, 數(shù)值越大, 模糊效果越明顯
- spread-radius: 擴(kuò)展半徑, 可選參數(shù), 如果值為正，則整個陰影都延展擴(kuò)大，反之值為負(fù)值是，則縮小
- color: 陰影顏色
關(guān)于偏移量
這張圖可以幫助我們記憶偏移量的規(guī)則(同樣適用于絕對定位, 元素的移動(translate)等跟位置相關(guān)的場景), 我們可以在想象一個坐標(biāo)軸, 以x-offset為例, 當(dāng)x-offset為正值的時(shí)候, 相當(dāng)于原點(diǎn)向左移動了, 為負(fù)數(shù)的時(shí)候, 相當(dāng)與原點(diǎn)向右移動了, y-offset也是同樣的道理
內(nèi)陰影
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;
}
單邊陰影
方法: 先設(shè)置模糊半徑, 設(shè)置擴(kuò)展半徑為負(fù)數(shù), 縮小陰影大小, 直到看不到陰影, 然后將陰影向上移動.
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;/*每個陰影用逗號隔開, 最先定義的顯示在最上面*/
}
綜合應(yīng)用-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
屬性用來給元素邊框添加背景圖片; 瀏覽器應(yīng)用了 border-image 則不再應(yīng)用 border-style.
border-image是由以下幾個屬性組成的:
- border-image-source: none?。J(rèn)值）
- border-image-slice: 100% （默認(rèn)值）
- border-image-width: 1?。J(rèn)值）
- border-image-repeat: stretch?。J(rèn)值）
border-image-source（圖片地址）
border-image-source: url(xx.png);
border-image-slice (圖片裁剪)
border-image-slice: [<number> | <percentage>]{1,4} && fill?
取值為長度或百分比（相對于圖片） 分別設(shè)置四個變， 簡寫遵循上右下左原則
fill
顯示中間的圖片
border-image-width (圖片邊框大小)
簡寫遵循上右下左原則
取值:
<length>
表示邊框?qū)挾? 可以是絕對長度或相對長度. 不能使用負(fù)值。
<percentage>
按照元素的百分比（%）表示邊框?qū)挾? 不能使用負(fù)值.
<number>
根據(jù)元素 border-width 屬性，用倍數(shù)表示邊框?qū)挾? 不能使用負(fù)值
border-image-repeat (圖片的排列方式)
或?yàn)閱蝹€值，設(shè)置所有的邊框；或?yàn)閮蓚€值，分別設(shè)置水平與垂直的邊框。
可選值:
- stretch 拉伸圖片以填充邊框
- repeat 平鋪圖片以填充邊框(從中間向兩邊平鋪,超出部分裁剪)
- round 類似于repeat，不過是整數(shù)次平鋪（不會裁剪，而是適當(dāng)?shù)睦靾D片）
border-image繪制原理簡述:
共存在兩個九宮格，一個是邊框圖片，還有一個就是邊框本身，九個方位關(guān)系一一對應(yīng)。邊框本身的特性讓其變成了一個九宮格，四條邊框交錯，加上其圍住的區(qū)域，正好形成一個九宮格。邊框圖片則是通過圖片剪裁實(shí)現(xiàn)了九宮格。這是理解繪制原理的基礎(chǔ)。
調(diào)用邊框圖片
border-image的url屬性，通過相對或絕對路徑鏈接圖片。邊框圖片的剪裁
border-image的數(shù)值參數(shù)剪裁邊框圖片，形成九宮格。剪裁圖片填充邊框
邊框圖片被切割成9部分，以一一對應(yīng)的關(guān)系放到div邊框的九宮格中，然后再壓縮（或拉伸）至（border-image-width）的寬度大小。執(zhí)行重復(fù)屬性
被填充至邊框九宮格四個角落的的邊框圖片是不執(zhí)行重復(fù)屬性的。上下的九宮格執(zhí)行水平方向的重復(fù)屬性（拉伸或平鋪），左右的格子執(zhí)行垂直方向的重復(fù)屬性，而中間的那個格子則水平重復(fù)和垂直方向的重復(fù)都要執(zhí)行。
