CSS / 前端技術 / 筆記 · 2019-09-26

CSS border-radius 圓角

基本圓角設定

border-top-left-radius左上
border-top-right-radius右上
border-bottom-right-radius右下
border-bottom-left-radius左下
border-radius左上 右上 右下 左下
.button{
   /* IE 修正 */
    -pie-lazy-init: true;
    behavior: url(PIE.htc);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* 圓角效果 */
    border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
}

指定弧形的寬和高,”/” 左邊角的寬,右邊角的高,四個角可各自設定,無填寫則按照第一個設定。

border-radius0px 10px 50px / 20px 10px