• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

css3 border-radius

css3手册 薛 陈磊 862次浏览 已收录 0个评论 扫描二维码

css3中的border-radius属性可以给页面元素设置成圆角,并且对元素的background、border、background image有效:

css3 border-radius

样式为:

#box1 {
    border- radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;   
}

#box2 {
    border- radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;   
}

#box3 {
    border- radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px;  
}
//网站内链问题,示例中border- radius中多加了个空格

圆角大小与border-radius:value值大小有关,快捷设置成圆形可以写成border-radius:50%;

指定每个圆角

border-radius:value是通常的写法,也是默认写法,其实和border-*一样,可以设置每个位置(四个值)的大小,或者写成两个、三个值:

css3 border-radius

规律很容易看懂;

除了border-radius,还有border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius的衍生写法,规律和border-radius:xpx xpx xpx xpxd 的写法效果一致,可以单独使用赋值;

各浏览器支持情况:

css3 border-radius


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明css3 border-radius
喜欢 (2)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址