关于如何用css使盒子的边框做成圆角的问题

您所在的位置:网站首页 css边框怎么设置为圆角矩形 关于如何用css使盒子的边框做成圆角的问题

关于如何用css使盒子的边框做成圆角的问题

2024-07-15 18:20| 来源: 网络整理| 查看: 265

要实现圆角的效果其实很简单,用一个radius属性就行了。话不多说,直接上代码:

.top{ width: 100px; height: 100px; border: 1px solid #333; border-radius: 10px;/* 圆角的大小可以自己调 */ }

在浏览器打开:

就实现了这样的圆角效果。

 

而且我们还可以某一个角实现圆角效果,以下两段代码是等价的:

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

如果你只想让边框的某一个角实现圆角效果的话,就只对那个角设置对应的属性就行了。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3