CSS 圆角 | 您所在的位置:网站首页 › css如何设置圆角矩形背景图片 › CSS 圆角 |
CSS border-radius - 指定每个角
border-radius 属性可以接受一到四个值。规则如下: 四个值 - border-radius: 15px 50px 30px 5px;(依次分别用于:左上角、右上角、右下角、左下角): 三个值 - border-radius: 15px 50px 30px;(第一个值用于左上角,第二个值用于右上角和左下角,第三个用于右下角): 两个值 - border-radius: 15px 50px;(第一个值用于左上角和右下角,第二个值用于右上角和左下角): 一个值 - border-radius: 15px;(该值用于所有四个角,圆角都是一样的): 这是代码: 实例 #rcorners1 { border-radius: 15px 50px 30px 5px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 15px 50px 30px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 15px 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners4 { border-radius: 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }亲自试一试 您还可以创建椭圆角: 实例 #rcorners1 { border-radius: 50px / 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 15px / 50px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 50%; background: #73AD21; padding: 20px; width: 200px; height: 150px; }亲自试一试 |
CopyRight 2018-2019 实验室设备网 版权所有 |