例如:border-radius:10px 20px;表示左上角、右下角为10px,右上角、左下角为20px;
结果
(3)border-radius:设置三个值;
例如:border-radius:10px 20px 30px;表示左上角、右上角和左下角、左下角的圆角半径依次是10px、20px、30px
结果
(4)border-radius:设置四个值
例如:border-radius:10px 20px 30px 40px;表示左上角、右上角、右下角和左下角的圆角半径依次是10px 20px 30px 40px
结果
实现下图效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
以上就是css怎么样实现图片圆角的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5 border属性怎么设置?html5 table中的border属性介绍
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者