【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订购交易亏损被... 　　近期，不少投资者反映在“大吉订购App”上投资白银、铂金等商品遭遇严重亏损。该平台宣称提供现货订...
铂银壹号APP商品订购交易亏损... 　　许多中小投资者误以为网上的“商品现货订购”是合规合法的理财渠道，殊不知这背后隐藏着巨大的合规风险...
兴鑫淘金APP贵金属订购交易亏... 　　白银、贵金属或其他商品类投资，除国家批准的正规期货交易场所及持牌期货公司外，市面上大量第三方交易...
铂银掘金APP无资质的违规平台... 　　铂银掘金等平台的投资者，往往是被“注册送现金”“充值返现券”“首单免亏”等广告话术吸引，进而下载...
八方淘金APP订购交易不合规，... 　　“八方淘金APP”“铂银掘金APP”“铂银壹号APP”等软件被指以“现货订购”为名，实际采用高杠...
在指尖订购APP订购商品亏损被... 　　指尖订购APP这类平台，表面是“订购交易”，实则是披着电商外衣的非法期货陷阱。绝大多数投资者被蒙...
在犀贝易购APP做商品订购交易... 　　市面上打着“现货投资”“贵金属交易”旗号的APP并不少，但真正合规、受监管的平台并不多。犀贝易购...
易达淘金APP虚假商品订购交易... 　　易达淘金APP存在严重的虚假宣传与违规交易行为。该平台打着“商品订购”的旗号，实则通过不合规的交...
大浪淘金APP白银订购亏损被骗... 　　大浪淘金APP最隐蔽的套路，在于其完全封闭的内盘交易系统。表面上，它宣称与国际贵金属市场接轨；实...
一品好购APP上订购白银出现亏... 　　一品好购APP原名“一品订购”，运营方为上海宝智未来信息技术有限公司。近期不少投资者反映在该平台...
九州订购APP贵金属订购投资骗... 　　九州订购APP正通过抖.音、快手、今日头条等平台大量投放投资广告，用“5元起投”“充值返现”“0...
坚锅淘金APP交易软件并不正规... 　　当前，市面上大量所谓的“现货商城订购”交易软件，早已偏离了正常的实物商品买卖，演变为高杠杆、高手...
斗金订购APP贵金属期货交易骗... 　　斗金订购APP的投资者往往被铺天盖地的广告宣传所诱导——注册即送现金、充值返现券等看似诱人的福利...
警惕！云启购APP违规经营，披... 　　"5元起投、充值返现、稳赚不赔"——这些诱人的广告语背后，可能是一个精心设计的金融陷阱。　　近期...
量子淘金APP贵金属投资不合规... 　　"4元起投""充值返券""月入过万"——这些极具诱惑力的广告语在短视频平台、社交软件上铺天盖地。...
鑫汇智投APP贵金属商品订购骗... 　　鑫汇智投APP非法期货投资骗局，受害者在投资过程中根本不懂交易，也不去研究和验证这个平台是否正规...
矅光智策APP平台违规经营非法... 　　矅光智策APP对外宣称是“商城订购”“现货交易”，但查询其经营范围，并未显示具备开展现货期货交易...
黄金珠宝怎么选？内侧刻字都代表... 潮新闻客户端 记者 马焱 通讯员 任倩影 9月8日下午，“云游杭州 乐购金秋”——“浙城·浙放心”活...
原创 冰... 最近全球国债市场正在上演魔幻一幕： 美债、日债、欧债遭遇猛烈抛售，收益率冲到几十年新高，美国财政部都...
日韩股市开盘表现分化 上证报中国证券网讯 9月9日，日韩股市开盘表现分化，韩国综合指数开盘上涨0.26%，报6972.87...