css3 border-radius圆角

时间：5年前阅读：5411

在日常项目过程中，border-radius这个属性算是非常常用的属性之一了，通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。

一、border-radius使用

　　border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有三种写法：

　　（1）仅设置一个值

　　第一种方法，应该是我们最常用的一种情况了，常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度，例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style type="text/css">
	#dd{
		width: 400px;
		height: 200px;
		display: flex;
		justify-content: space-between;
	}
	.tt{
	 border: 3px solid red;
     height: 100px;
     width: 200px;
     border-radius: 30px;
	}

 	.uu{
 
	 border: 3px solid darkgreen;
     height: 100px;
     width: 100px;
     border-radius: 50%;
	}
</style>
	</head>
	<body>
		<div id="dd">
		<div class="tt"></div>
		<div class="uu"></div>
		</div>
	</body>
</html>

　　（2）设置四个方向的值

　　border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，因此，border-radius : 30px;，其实等价于border-radius : 30px 30px 30px 30px;（ps：与padding和margin一样，各个数字之间用空格隔开）。

　　这里要注意四个数值的书写顺序，不同于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序，如下图所示：

（3）省略部分值

　　与padding和margin一样，border-radius同样可以省略部分值，省略时同样是采用对角线相等的原则，例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style type="text/css">
	.tt{
	 border: 3px solid red;
     height: 100px;
     width: 200px;
     border-radius: 50px 0;
	}

</style>
	</head>
	<body>
		<div id="dd">
		<div class="tt"></div>
		</div>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css3 border-radius圆角

网友评论