border-radius
設(shè)置邊框圓角
width: 100px;
height: 100px;
border-radius: 50%;
// 相當(dāng)于
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;
border-image
用圖片作為邊框的修飾
box-shadow
邊框陰影效果
box-shadow:inset x-offset y-offset blur-radius spread-radius color
box-shadow屬性至多有6個參數(shù)設(shè)置
- 陰影類型:此參數(shù)是一個可選值,如果不設(shè)值,其默認的投影方式是外陰影;如果取其唯一值inset,就是將外陰影變成內(nèi)陰影
- X-offset:是指陰影的水平偏移量,其值可以是正負值,如果為正值,則陰影在對象的右邊,反之其值為負值時,陰影在對象的左邊
- Y-offset:是指陰影的垂直偏移量,其值可以是正負值,如果為正值,則陰影在對象的底部,反之其值為負值時,陰影在對象的頂部
- 陰影模糊半徑:此參數(shù)是可選,,但其值只能是為正值,如果其值為0時,表示陰影不具有模糊效果,其值越大陰影的邊緣就越模糊
- 陰影擴展半徑:此參數(shù)可選,其值可以是正負值,如果值為正,則整個陰影都延展擴大,反之值為負值是,則縮小
- 陰影顏色:此參數(shù)可選,如果不設(shè)定任何顏色時,瀏覽器會取默認色,但各瀏覽器默認色不一樣

邊框陰影效果.png