CSS3 圆角 |
您所在的位置:网站首页 › css内圆角 › CSS3 圆角 |
❮ 上一节
下一节 ❯
CSS3 圆角
CSS3 圆角
通过 CSS border-radius 属性,可以实现任何元素的"圆角"样式。 CSS3 border-radius 属性CSS border-radius 属性定义元素角的半径。 提示:您可以使用此属性为元素添加圆角! 这里有三个例子: 1. 带有指定背景颜色的元素的圆角: 圆角! 2. 带边框元素的圆角: 圆角! 3. 带有背景图像的元素的圆角: 圆角! 这是代码: 实例 #rcorners1 { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }#rcorners2 { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } 亲自试一试 »提示: border-radius 属性实际上是以下属性的简写属性: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius CSS3 border-radius - 指定每个角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;} 亲自试一试 » CSS3 习题和测验 测验 1 » 测验 2 » CSS3 圆角属性 属性 描述 border-radius 用于设置所有四个 border-*-*-radius 属性的简写属性。 border-top-left-radius 定义左上角边框的形状。 border-top-right-radius 定义右上角边框的形状。 border-bottom-right-radius 定义右下角边框的形状。 border-bottom-left-radius 定义左下角边框的形状。 ❮ 上一节 下一节 ❯ |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |