【CSS】盒子模型圆角边框 ( 通过设置 border |
您所在的位置：网站首页 › 设置边框的样式 › 【CSS】盒子模型圆角边框 ( 通过设置 border |
【CSS】盒子模型圆角边框 ( 通过设置 border
|
【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
原创
韩曙亮_ 2023-05-05 11:45:00 ©著作权 文章标签 css css3 html 盒子模型 圆角矩形边框 文章分类 代码人生 ©著作权归作者所有：来自51CTO博客作者韩曙亮_的原创作品，请联系作者获取转载授权，否则将追究法律责任 文章目录一、盒子模型圆角边框二、代码示例1、代码示例 - 正常矩形边框2、代码示例 - 圆形边框3、代码示例 - 圆角矩形边框4、代码示例 - 综合对比示例一、盒子模型圆角边框 在 CSS3 中 , 新加入了 圆角边框 border-radius: length;属性 , 即可设置 盒子模型 的 圆角边框 ;
border-radius 属性值取值 : 像素数值 : 设置一个 像素值 , 如 : 50px ;百分比数值 : 设置一个 百分比数值 , 如 : 50% ;在网页设计中 , 大量用到了圆角边框 , 如 : 购物车上的数字 : 购物车上的浮动数字 , 使用了圆角边框 ;
二、代码示例1、代码示例 - 正常矩形边框
默认情况下的边框 , 是 矩形的边框 ;
代码示例 : 圆角矩形 /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } /* 正常矩形样式 */ .div1 { width: 200px; height: 200px; background-color: pink; } 正常矩形展示效果 :
2、代码示例 - 圆形边框
如果 盒子模型 高度 = 宽度 , 并且 圆角矩形 的 圆角半径 为 50% 或者 高度/宽度 的一半 , 则该圆角矩形 表现就是一个圆 ;
代码示例 : 圆角矩形 /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } /* 圆角矩形样式 */ div { width: 200px; height: 200px; background-color: pink; /* 设置圆角 下面两种设置效果相同 */ /*border-radius: 100px;*/ border-radius: 50%; /* 文字水平居中 */ text-align: center; /* 文字垂直居中 */ line-height: 200px; } 圆角矩形展示效果 :
3、代码示例 - 圆角矩形边框
如果 盒子模型 高度 != 宽度 , 并且 圆角矩形 的 圆角半径 为 高度 的一半 , 则该圆角矩形 表现就是一个正常的圆角矩形 , 左右两侧是圆角 ;
代码示例 : 圆角矩形 /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } /* 圆角矩形样式 */ div { width: 200px; height: 50px; background-color: pink; /* 设置圆角 */ border-radius: 25px; /* 文字水平居中 */ text-align: center; /* 文字垂直居中 */ line-height: 50px; } 圆角矩形展示效果 :
4、代码示例 - 综合对比示例
代码示例 : 圆角矩形 /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } /* 正常矩形样式 */ .div1 { width: 200px; height: 200px; background-color: pink; } /* 圆角矩形样式 */ .div2 { width: 200px; height: 200px; background-color: pink; /* 设置圆角 下面两种设置效果相同 */ /*border-radius: 100px;*/ border-radius: 50%; /* 文字水平居中 */ text-align: center; /* 文字垂直居中 */ line-height: 200px; } /* 圆角矩形样式 */ .div3 { width: 200px; height: 50px; background-color: pink; /* 设置圆角 */ border-radius: 25px; /* 文字水平居中 */ text-align: center; /* 文字垂直居中 */ line-height: 50px; } 正常矩形 圆角矩形 圆角矩形2展示效果 :
赞 收藏 评论 分享 举报 上一篇：【Midjourney】Midjourney 注册与使用 ( 下载并注册 Discord | 加入 Midjourney 服务器 | 创建 Discord 个人服务器 ) 下一篇：【Java AWT 图形界面编程】经度 Longitude 、纬度 Latitude 计算 ( 经度、纬度概念 | 根据经纬度计算距离 ) |
【本文地址】
今日新闻 |
推荐新闻 |