【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函数的参数

相关内容

热门资讯

天力复合：7月22日融资买入1... 证券之星消息，7月22日，天力复合（873576）融资买入145.39万元，融资偿还168.55万元...
“3C”标志非商品 违法制售要... 马云骢 “禁止旅客携带没有3C标识、3C标识不清晰、被召回型号或批次的充电宝乘坐境内航班。”近期，民...
亚通股份被责令改正，时任董事长... 雷达财经 文|冯秀语 编|李亦辉 7月22日，上海亚通股份有限公司（证券简称：亚通股份，证券代码：6...
京东美团杀入了同一片战场 作者 | 周智宇 编辑 | 张晓玲 在具身智能的牌桌上，美团一直是那个下注最凶的玩家。它早已将触角伸...
业务创新 | 商业银行谱写养老... 文/中国建设银行平台运营中心 张丰安 肖璧微 我国人口老龄化问题加剧，养老金融发展面临严峻挑战，20...
多行业“反内卷”，持续推进中！ 汽车、光伏、水泥、钢铁，不同行业，同在“反内卷”！从7月1日中央财经委员会第六次会议，到近期国务院常...
运输规模稳步增长！今年上半年我... （央视财经《经济信息联播》）今天（21日），民航局相关负责人在国新办新闻发布会上介绍，“十四五”期间...
对话Outer创始人刘佳科：6... 作者：欧雪 编辑：彭孝秋 Outer又有新动作了，这次是推出第二个大单品。 2018年，Outer第...
22日鸡蛋下跌0.08%，最新... 来源：新浪期货 新浪期货 根据交易所数据，截至7月22日收盘主力合约鸡蛋2509,涨跌-0.08%,...
欧洲人口新高难题依旧（环球热点... 欧盟统计局最新数据显示，欧盟人口总量突破4.5亿，创下历史新高。2024年欧盟人口自然减少126万，...
特朗普称美日达成贸易协议：对日... 当地时间7月22日，美国总统特朗普通过社交媒体宣布美国与日本达成贸易协议：对日关税税率为15%及日本...
早报市场监管总局：暂停对杜邦公... 宏观新闻 1、国务院总理李强日前签署国务院令，公布《农村公路条例》，自2025年9月15日起施行。《...
《农村公路条例》公布；央行：房... 昨日A股 7月22日，A股三大指数集体上涨，截至收盘，沪指涨0.62%，深成指涨0.84%，创业板指...
“反内卷”行情持续发酵，煤炭E... 煤炭ETF（515220）四连阳，7月22日大涨8.25%。 来源：Wind 消息面上，“煤炭限产...
特朗普喊话“用蔗糖”，可口可乐... 可口可乐公司22日宣布，将于今年秋季在美国市场推出一款以“美国蔗糖”为甜味剂的可乐新品。就在一周前，...
大变局！阿里京东美团，都在害怕... 文｜华商韬略 京东将外卖放到主APP一级入口，并高调进军酒旅行业；淘宝重磅推出闪购的同时，合并饿了...
中设咨询今年上半年新签订单95... 中设咨询7月22日晚间在关于对北京证券交易所2024年年报问询函回复的公告中披露：2025年，公司主...
无需预约、提供插座，星巴克回应... 华声在线7月22日讯（全媒体记者 仝若楠 通讯员 万家忻）近日，有网友在社交媒体上发帖表示，广东部分...
黑天鹅突袭！7个跌停！ 【导读】*ST苏吴控股孙公司独家经销权将被撤销，拟撤销方被爱美客接手不久 中国基金报记者 闻言 7月...
鲍威尔：美联储须专注于确保大型... 来源：智通财经网 美联储主席鲍威尔周二表示，美联储的监管实践“必须集中在决定安全与稳健的关键领域”。...