您现在的位置是:首页 > 学无止境 > Web网站首页Web 如何使用css写出圆形边框
如何使用css写出圆形边框
- Web
- 2019-08-20
简介有的时候,单一直角边角的边框无法满足我们的审美需求,那么如何做出一种圆形边角的边框呢字数
489
有的时候,单一直角边角的边框无法满足我们的审美需求,那么如何做出一种圆形边角的边框呢?css提供了border-radius属性来满足我们的需求。
DIV圆角
css代码:
-moz-border-radius
以及-webkit-border-radius: 15px
这两个是为了兼容其他一些不常用浏览写的css圆角代码。
html代码:
结果如下:
图片圆角
css代码:
html代码:
结果如下:
一边圆角
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”。
- Web
- 2019-08-20
有的时候,单一直角边角的边框无法满足我们的审美需求,那么如何做出一种圆形边角的边框呢?css提供了border-radius属性来满足我们的需求。
DIV圆角
css代码:
-moz-border-radius
以及-webkit-border-radius: 15px
这两个是为了兼容其他一些不常用浏览写的css圆角代码。
html代码:
结果如下:
图片圆角
css代码:
html代码:
结果如下:
一边圆角
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”。