CSS3中關於圓角和陰影以及邊框圖片和盒子內減的詳解

圓角： border-radius
陰影： box-shadow
邊框圖片： border-image
盒子內減： box-sizing:border-box;

圓角：border-radius:像素/百分比

一個值設定的是盒子的四個角的水平和垂直半徑 每個角都可以單獨進行設定，取值順序是左上 右上 右下 左下順時針設定 可以簡寫，邏輯跟padding和margin一樣 單位支援像素，和百分比（參照的是寬度和高度）

可以用 水平半徑/垂直半徑去單獨控制半徑，並且每一個半徑都可以單獨控制

p:nth-child(5){    border-radius: 0px 200px;}p:nth-child(7){    width: 400px;    /* 如果中間有斜杠，控制的是水平方向和垂直方向的半徑大小 */    border-radius: 200px/100px;}

膠囊的製作： 值為大於等於短邊的一半即可，一半以上也不會有變化。

p {        width: 200px;        height: 100px;        background-color: palevioletred;        border-radius: 50px;    }

陰影：box-shadow:值

值說明：

第一個值 ：Npx 陰影向水平方向位移N個像素 第二個值 ：Npx 陰影向垂直方向位移N個像素 第三個值 ：羽化大小 第四個值 ：陰影尺寸 第五個值 ：顏色（預設黑色） 第六個參數： 內外陰影（預設是外陰影，內陰影是inset） 陰影可以寫多個，中間用逗號隔開

陰影可以簡寫，但是需要注意有一些值需要補0

p:nth-child(8):hover{    /* 陰影可以寫多個 */    background-color: #000;    box-shadow: 10px 10px 10px 2px red, 20px 20px 10px 4px green,30px 30px 2px 6px blue;}

文字陰影

文法：text-shadow:水平位移 垂直位移 羽化大小 顏色

邊框圖片：border-image:值

遵從的是九宮格式切圖，上下左右分別來一刀

值說明：

border-image-source:url(‘border.png’); 圖片路徑 border-image-slice:26;圖片切割，不要帶單位，遵從九宮格式切圖法（上下左右各來一刀） border-image-repeat:round或者stretch或者repeat; round沒有瑕疵，stretch預設展開，repeat 平鋪（可能有瑕疵）

簡寫：border-image:url(‘border.png’) 26 round;

盒子內減:box-sizing:border-box

content-box： padding和border不被包含在定義的width和height之內。對象的實際寬度等於設定的width值和border、padding之和，即 ( Element width = width + border + padding )
此屬性工作表現為標準模式下的盒模型。

border-box： padding和border被包含在定義的width和height之內。對象的實際寬度就等於設定的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width )
此屬性工作表現為怪異模式下的盒模型。

vcq91q7SuzwvcD4NCjxwcmUgY2xhc3M9"brush:sql;">/*bootstrap全域中設定該樣式*/*,*::before,*:after{border-sizing:border-box;}

小例子：實現兩列布局，中間始終保持有10px的間距

<style type="text/css">* {    padding: 0;    margin: 0;}.left {    width: 50%;    float: left;    height: 300px;    padding-right: 5px;    box-sizing: border-box;}.right {    width: 50%;    float: left;    height: 300px;    padding-left: 5px;    box-sizing: border-box;}.info {    width: 100%;    height: 100%;    background-color: pink;