CSS3 border-radius属性单位px和%的区别

最新推荐文章于 2022-08-19 09:59:01 发布

今天也是爱大大的一天吖

最新推荐文章于 2022-08-19 09:59:01 发布

阅读量1.2k

点赞数 3

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/qq_45560350/article/details/106630508

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

border-radius 属性

给元素添加圆角边框
最多可指定四个border-*-radius属性（border-radius 属性是个复合属性）

语法

border-radius：(1-4个) length | %;
每个半径的四个值的顺序是：左上角、右上角、右下角、左下角。

以%为单位的值的参考对象

以length为单位的值是一个明确的值，而以百分比格式为单位的值必须有一个参考对象，那么这个参考对象会是什么？下面举个范例。

设置4个宽高相同，border-radius属性值相同的div。第一个div作为对照组，第二个div给其添加足够明显的边框，第三个div给其添加足够明显的外边距，第四个div给其添加足够明显的内边距。

<style>
	.test1{
		width: 500px; 
  		height: 100px; 
  		background: darkturquoise;
  		border-radius: 10%;
	}
	.test2{
		width: 500px; 
  		height: 100px; 
  		border: 200px solid pink;
  		background: darkturquoise;
  		border-radius: 10%;
	}
	.test3{
		width: 500px; 
  		height: 100px; 
  		background: darkturquoise;
  		border-radius: 10%;
  		margin:200px;
	}
	.test4{
		width: 500px; 
  		height: 100px; 
  		background: darkturquoise;
  		border-radius: 10%;
		padding:200px;
	}
</style>
<body>
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
<div class="test4">4</div>
</body>

效果图：
第一个div（对照）
在这里插入图片描述
第二个div（边框）

第三个div（外边距）

第四个div（内边距）

可以很明显的看出除了外边距对圆角边框的形状无影响之外，边框和内边距都对圆角边框的形状有影响。

实际上，以百分比格式为单位的值的参考对象是：边框+内边距+height/width。

单位px和%效果显示的区别

同一宽高的div设置同一数字不同单位border-radius属性

<style>
	 #home{ 
  		width: 100px; 
  		height: 100px; 
  		border: 50px solid darkturquoise; 
 		border-radius: 50px;
	}
	 #home1{ 
  		width: 100px; 
  		height: 100px; 
  		border: 50px solid darkturquoise; 
 		border-radius: 50%;
	}
	
</style>
<body>
<div id='home'>
</div>
<div id='home1'>
</div>

border-radius: 50px;效果图
在这里插入图片描述
border-radius: 50%;效果图（要确保边框的宽度为50px，会出现边框内侧也变成圆角的情况）

由此我们可以推断，元素为宽高相等的正方形时，当border-radius: 50px;时，是以边框的每个顶点为边界做一个直径为50px的圆；当border-radius: 50%;时，是以边框的每个顶点为边界做一个半径为50px（height:100px * 50%=50px=width:100px * 50%=50px）的圆。

为了证明这一推断，我们可以做几个验证。

把border-radius设为100px，即以100px为直径做圆，能得到和上面border-radius: 50%;时一样的图形。

border-radius:100px;效果图

在这里插入图片描述
推论成立。

将一个div的border-radius设为25px，按推断这是要做一个以25px为直径的圆，那么将另一个div的border-radius设为12.5%，即做一个以12.5px为半径的圆和前者的效果会是相同的。

border-radius: 25px;效果图

border-radius: 12.5%;效果图

显示出来的效果相同，推论是成立的。

元素为宽高相等的正方形时，当border-radius的值是以px为单位时，是以边框的每个顶点为边界做一个直径为XXpx的圆/椭圆；当border-radius的值是以%为单位时，是以边框的每个顶点为边界做一个半径为XXpx（=height * 50%=width * 50%）的圆。

今天也是爱大大的一天吖

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3 border-radius属性单位px和%的区别

border-radius 属性给元素添加圆角边框最多可指定四个border-*-radius属性（border-radius 属性是个复合属性）语法border-radius：(1-4个) length | %;每个半径的四个值的顺序是：左上角、右上角、右下角、左下角。以%为单位的值的参考对象以length为单位的值是一个明确的值，而以百分比格式为单位的值必须有一个参考对象，那么这个参考对象会是什么？下面举个范例。设置4个宽高相同，border-radius属性值相同的div。第一个di
复制链接

扫一扫