CSS3邊框

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

box-sizing:border-box;使用IE盒模型

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 3.5 CSS3盒子陰影屬性 box-shadow用來定義元素的盒子陰影。 3.5.1 box-shadow屬性的...
    白小蟲閱讀 416評論 0 0
  • border css3在很大程度上拓展了border的樣式,讓我們可以做出更加豐富的效果 border-radiu...
    風(fēng)隨風(fēng)去閱讀 428評論 0 1
  • text-shadow是給文本添加陰影效果,box-shadow是給元素塊添加周邊陰影效果。隨著HTML5和CSS...
    arlene112閱讀 2,340評論 0 1
  • border-radius 定義: border-radius屬性是一個簡寫屬性,用于設(shè)置四個border-*-r...
    lx_smile閱讀 625評論 2 3
  • 班里有個小姑娘,不愛學(xué)習(xí),成績也不好,因此也不太有自信。有一天早上,孩子們在讀書。一個男生坐在座位上伸長了脖子沖我...
    周悠悠閱讀 258評論 0 0

友情鏈接更多精彩內(nèi)容