CSS 使用border |
您所在的位置:网站首页 › 像框架图片随圆 › CSS 使用border |
1 使用详解
border-radius 说明:给元素的边框设置圆角,默认不设置圆角为矩形,可以给元素设置圆角将元素变为正圆、椭圆或圆角矩形 语法: (1)border-radius:50%,给元素设置50%的圆角大小。 (2)border-radius:40% 30%,给元素的左上角、右下角设置40%的圆角大小,给元素的右上角、左下角设置30%的圆角大小。 (3)border-radius:10% 20% 30% 40%,给元素的左上角设置10%的圆角大小,给元素的右下角设置20%的圆角大小,给元素的右上角设置30%的圆角大小、给元素的左下角设置40%的圆角大小。 (4)border-radius:10px,统一给元素的4个角设置10px的圆角大小。 (5)border-radius:10px 20px,给元素的左上角、右下角设置10px的圆角大小,给元素的右上角、左下角设置20px的圆角大小。 (6)border-radius:10px 20px 30px 40px,给元素的左上角设置10px的圆角大小,给元素的右下角设置20px的圆角大小,给元素的右上角设置30px的圆角大小、给元素的左下角设置40px的圆角大小。 注: (1)以百分比设置圆角大小时,最大值为50%。 (2)以固定值设置圆角大小时,最大值为元素宽度和高度里面最小值的一半。 例如:元素高度为300px,宽度为200px,圆角大小能够设置的最大值为100px。 2 标签元素变为正圆实现代码: 百分比正圆 px正圆效果图: 3 标签元素变为椭圆实现代码: 百分比椭圆效果图: 4 标签元素变为圆角矩形 (1)4个角统一圆角大小 实现代码: 百分比圆角矩形 px圆角矩形效果图: (2)2个角一组设置圆角大小 实现代码: 百分比圆角矩形 px圆角矩形效果图: (3)4个角分别设置圆角大小 实现代码: 百分比圆角矩形 px圆角矩形效果图: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |