【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
创始人
2025-05-31 07:26:06
0次

文章目录

  • 一、盒子模型圆角边框
  • 二、代码示例
    • 1、代码示例 - 正常矩形边框
    • 2、代码示例 - 圆形边框
    • 3、代码示例 - 圆角矩形边框
    • 4、代码示例 - 综合对比示例





一、盒子模型圆角边框


在 CSS3 中 , 新加入了 圆角边框 样式 , 设置

border-radius: length;

属性 , 即可设置 盒子模型 的 圆角边框 ;


border-radius 属性值取值 :

  • 像素数值 : 设置一个 像素值 , 如 : 50px ;
  • 百分比数值 : 设置一个 百分比数值 , 如 : 50% ;

在网页设计中 , 大量用到了圆角边框 , 如 :

  • 购物车上的数字 : 购物车上的浮动数字 , 使用了圆角边框 ;
    在这里插入图片描述

  • 圆角的按钮 : 下图中 头像 以及 下面的两个 按钮 , 都是圆角边框 ;

在这里插入图片描述





二、代码示例



1、代码示例 - 正常矩形边框


默认情况下的边框 , 是 矩形的边框 ;


代码示例 :

 

     圆角矩形


正常矩形

展示效果 :
在这里插入图片描述


2、代码示例 - 圆形边框


如果 盒子模型 高度 = 宽度 , 并且 圆角矩形 的 圆角半径 为 50% 或者 高度/宽度 的一半 , 则该圆角矩形 表现就是一个圆 ;


代码示例 :

 

     圆角矩形


圆角矩形

展示效果 :

在这里插入图片描述


3、代码示例 - 圆角矩形边框


如果 盒子模型 高度 != 宽度 , 并且 圆角矩形 的 圆角半径 为 高度 的一半 , 则该圆角矩形 表现就是一个正常的圆角矩形 , 左右两侧是圆角 ;


代码示例 :

 

     圆角矩形


圆角矩形

展示效果 :
在这里插入图片描述


4、代码示例 - 综合对比示例


代码示例 :

 

     圆角矩形


正常矩形
圆角矩形
圆角矩形2

展示效果 :

在这里插入图片描述

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：springcloud第三讲

下一篇：python函数的参数

相关内容

热门资讯

解码心理咨询：心灵的温柔回响 在快节奏的现代生活中，焦虑、迷茫、疲惫如影随形，不少人在情绪的漩涡中独自挣扎。此时，心理咨询并非遥不...
黄金交易提醒：金价再度飙升破纪... 汇通财经APP讯——在2026年伊始，市场再度上演惊人一幕，黄金价格周二（1月27日）收涨3.45%...
爆雷！这家知名上市胶企实控人、... 公开资料显示，熊海涛1964年出生，旗下核心资产高金技术产业集团有限公司（以下简称“高金集团”）同时...
机构看好半导体产业的关键成长期... 截止1月27日10点15分，上证指数跌0.25%，深证成指跌0.72%，创业板指跌0.25%。贵金属...
明起，暂停申购！专家：这波上涨... 1月26日，黄金白银走出史诗级行情，铂金和钯金也强势上涨，还有多个有色金属品种上涨。金属价格狂飙之下...
机器人组团上春晚：宇树三度登台... 1月26日晚，宇树科技宣布其成为“中央广播电视总台2026年春晚机器人合作伙伴”。这是宇树科技第三度...
洋河「悔棋」70亿：消失的利润... 「核心提示」 从承诺70亿分红到只能分20多亿，洋河发生了什么？ 作者 | 周可 编辑 | ...
原创 明... 1月25日，美国总统特朗普的一则公开声明，把美国的霸权逻辑明明白白摆到了世界面前。他直接宣布，美国已...
美股，两极分化！美联储，重大突... 1月27日晚间，美股三大指数上演“冰火两重天”。道琼斯指数跌0.83%，报49003.41点，标普5...
1月28日国际晨讯 | 芝商所... 北京时间1月28日早盘，现货黄金、白银下挫；日韩股市28日开盘表现分化；标普500指数创新高；通用汽...
紧跟政策东风 打通科技创新“最... “科技成果转化”是科技创新与产业结合的源头起点和内生动力，是科技创新的“最后一公里”。近年来，国家高...
美国将在中东举行空军战备演习 “亚伯拉罕·林肯”号航空母舰（视觉中国 资料图） 新华社华盛顿1月27日消息，负责中东地区美军行动的...
北部湾港：关于提前赎回“北港转... 证券日报网讯 1月27日，北部湾港发布公告称，根据安排，截至2026年2月12日收市后仍未转股的“北...
A股缩量上涨 半导体板块领涨结... 半导体板块日K线图 　　张大伟 制图 1月27日，A股早盘低开后集体下探，随后市场逐步震荡回升，午后...
原创 加... 斑马消费 沈庹 自2024年起，同仁堂集团就已着手将旗下企业同仁堂医养推上资本市场。如今，这一工作仍...
特斯拉联手全美最大公路服务区运... IT之家 1 月 28 日消息，特斯拉宣布与美国最大的公路服务区运营商 Pilot Travel C...
国恩股份启动H股发售！企业国际... 港股新股市场，出现火爆认购。 2026年1月27日，青岛国恩科技股份有限公司（以下简称“国恩股份”）...
37万亿基金规模排名出炉 10... 来源：21世纪经济报道 随着2025年四季报披露收官，公募基金行业管理规模再度刷新历史纪录。截至去年...
*ST亚太大宗交易折价成交50... *ST亚太01月27日大宗交易平台共发生1笔成交，合计成交量50.00万股，成交金额450.00万元...
象生科技获数千万元融资，通过微... 据麦姆斯咨询报道，近期，专注于生物基及高性能材料微流智能制造的产业化企业「象生科技」宣布，已完成连续...