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個像素第三個值：羽化大小第四個值：陰影尺寸第五個值：顏色（預設為黑色） 第六個參數： 內外陰影（預設為外陰影，內陰影是in set） 陰影可以寫多個，中間用逗號隔開

陰影可以簡寫，但是需要注意有一些值需要補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;

以上是CSS3中關於圓角和陰影以及邊框圖片和盒子內減的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！