您现在的位置是:首页 > 学无止境 > Web网站首页Web 如何使用css写出圆形边框

如何使用css写出圆形边框

  • 莫愁
  • Web
  • 2019-08-20
简介有的时候,单一直角边角的边框无法满足我们的审美需求,那么如何做出一种圆形边角的边框呢
字数 489

有的时候,单一直角边角的边框无法满足我们的审美需求,那么如何做出一种圆形边角的边框呢?css提供了border-radius属性来满足我们的需求。

DIV圆角

css代码:

 -moz-border-radius以及-webkit-border-radius: 15px这两个是为了兼容其他一些不常用浏览写的css圆角代码。

html代码:

结果如下:

css写出圆形边框

 

 

图片圆角

css代码:

html代码:

结果如下:

css写出圆形边框

 

 

一边圆角

css代码:

结果如下

css写出圆形边框

 

其实圆角代码也支持拆分的(四个边框都圆角10px的拆分css代码如下):

border-top-left-radius: 10px;   
border-top-right-radius: 10px; 
border-bottom-right-radius:10px;  
border-bottom-left-radius:  10px;

 


转载: 感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/323.html”。

文章评论

    • 评论
    人参与,条评论

技术在线

服务时间

周一至周日 12:00-22:00

关闭下雪
关闭背景特效