圆角属性

在这里插入图片描述
css代码:

		    div{
				float: left;
				width: 100px;
				height: 100px;
				margin: 10px;
				background-color: #008000;
			}
			.box1{
				/* 圆角单属性 */
				/* 一个值:水平垂直 */
				border-top-left-radius: 10px;
				
				/* 两个值:1.水平 2.垂直 */
				border-top-right-radius: 10px 30px;
				
				/* 是宽高的百分比 */
				border-bottom-right-radius: 50%;
				border-bottom-left-radius: 20% 50%;
			}
			/* 圆角复合属性 */
			.box2{
				/* 一个值:左上  右上  右下  左下 */
				border-radius: 40%;
			}
			.box3{
				/* 两个值:左上右下  右上左下 */
				border-radius: 10px 30px;
			}
			.box4{
				/* 三个值:左上  右上左下  右下*/
				border-radius: 10px 30px 15px;
			}
			.box5{
				/* 四个值:左上  右上  右下  左下 */
				border-radius: 10px 20px 30px 40px;
			}
			/* 水平/垂直 */
			.box6{
				/* border-radius: 20px/50px ; */
				border-radius: 10px 20px 30px 40px/40px 30px 20px 10px ;
			}

html代码:

			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>
			<div class="box4">4</div>
			<div class="box5">5</div>
			<div class="box6">6</div>
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页