box-sizing

取值

content-box | border-box

context-box(默認值)

css屬性中width設置了內(nèi)容高度

元素高度　＝　內(nèi)容高度 + padding + border

元素高度　＝　內(nèi)容高度 + padding + border

border-box

css屬性中width設置了元素的高度

內(nèi)容的高度 = 元素高度　－　padding - border

內(nèi)容的高度 = 元素高度　－　padding - border

resize (縮放屬性)

/* Keyword values */
resize: none;
resize: both; /* 可以修改高度和寬度 */
resize: horizontal;　/* 只能修改高度 */
resize: vertical;　/* 只能修改寬度 */

必須加overflow屬性

outline(外輪廓)

outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset]

與border對比:

• outline不占用網(wǎng)頁布局空間
• outline四邊的都是一樣的,不能像border一樣單獨設置
• border設置的邊框只能向外擴展，outline可以通過設置outline-offset向內(nèi)部創(chuàng)建輪廓

-webkit-box-reflect(倒影)

只有webkit支持

三個參數(shù)：

• direction 方向 above|below|left|right;
• 距離
• 漸變（可選）

img{
    -webkit-box-reflect: below 10px linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6));
}