css border-radius 圆角边框_在使用border-radius属性时,如果第二个参数省略会怎么样 ?-CSDN博客

本文链接：https://blog.csdn.net/qq_35647460/article/details/108974625

border-radius

设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>border-radius_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
ul{margin:0;padding:0;}
li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}
.test .one{border-radius:10px;}
.test .two{border-radius:10px 20px;}
.test .three{border-radius:10px 20px 30px;}
.test .four{border-radius:10px 20px 30px 40px;}
.test2 .one{border-radius:10px/5px;}
.test2 .two{border-radius:10px 20px/5px 10px;}
.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}
.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
</style>
</head>
<body>
<h2>水平与垂直半径相同时：</h2>
<ul class="test">
	<li class="one">提供1个参数<br />border-radius:10px;</li>
	<li class="two">提供2个参数<br />border-radius:10px 20px;</li>
	<li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>
	<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>
</ul>
<h2>水平与垂直半径不同时：</h2>
<ul class="test2">
	<li class="one">提供1个参数<br />border-radius:10px/5px;</li>
	<li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li>
	<li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>
	<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
</ul>
</body>
</html>

在这里插入图片描述