border-radius属性怎样运用【html5教程】

border-radius属性是一个边框属性，能够用于设置边框圆角，那末border-radius属性的细致用法是如何的呢？本篇文章就来给人人引见一下关于border-radius属性的细致用法。下面我们来看细致的内容。

我们在日常平凡看border-radius属性会看到它的语法以下所示

　border-radius: 1-4 length|% / 1-4 length|%;

很多人能够不知道这是什么意思，实在这是border-radius的完全写法，我们日常平凡写就是，border-radius:20px;，完全的写法应该是：border-radius : 20px 20px 20px 20px / 20px 20px 20px 20px;，个中前面四个20px示意程度半径，背面的四个值则示意垂直半径，我们就是经由过程设置程度半径和垂直半径来绘制椭圆或许圆形，也能够绘制一些其他有弧度的图形。

接下来我们就来细致看一下border-radius属性的用法

我们能够设置一个圆角边框或许是一个圆形

圆角边框

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 200px;
    width: 300px;
    border-radius: 45px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

结果以下

圆形

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 100px;
    width: 100px;
    border-radius: 54px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

结果以下

能够设置带有弧度的其他图形

代码以下

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
#test {
	height: 100px;
    width: 200px;
    border: 3px solid pink;
    border-radius: 60px 5px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

结果以下