border-radius详解
现在只有Mozilla/Firefox 和 Safari 3支持该属性。
随意指定圆角的位置:
-moz-border-radius-topleft/-webkit-border-top-left-radius
-moz-border-radius-topright/-webkit-border-top-right-radius
-moz-border-radius-bottomleft/-webkit-border-bottom-left-radius
-moz-border-radius-bottomright/-webkit-border-bottom-right-radius
使用css3的border-radius画圆,半圆和四分之一圆。
border-radius:2,3,4,5-----左上角,右上角,右下角,左下角;
实心圆:示例代码:
#circle{
width:200px;
height:200px;
background-color:red;
-webkit-border-radius:100px;
}
空心圆:示例代码:
#circle{
width:200px;
height:200px;
background-color:white;
border:3px solid red;
-webkit-border-radius:100px;
}
半圆:示例代码:
#circle{
width:200px;
height:100px;
background-color:white;
border:3px solid red;
border-radius:100px 100px 0 0;
}
四分之一圆:示例代码:
#circle{
width:200px;
height:200px;
background-color:white;
border:3px solid red;
border-radius:200px 0 0 0;
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步