关闭

border-radius 圆角矩形

131人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div{
	width:100px;
	height:100px;
	border:1px solid red;
	margin:10px;
	float:left;
	text-align:center;
	}
div:nth-of-type(1)
	{
	border-radius:10px/10px;
	}
div:nth-of-type(2)
{
	border-radius:15px;
	
	}
div:nth-of-type(3)
{
	border-radius:15px 15px 0 0;
	
	}
	div:nth-of-type(4)
{
	border-radius:15px 0 15px 0;
	
	}
	div:nth-of-type(5)
{
	border-radius:5px 15px 0 15px;
	
	}
	div:nth-of-type(6)
{
	border-radius:50%;
	
	}
div:nth-of-type(7)
{
	border-radius:50px;
	
	}
img{
	border:3px solid #ccc;
	border-radius:50%;
	}
div:nth-of-type(8)
{
	border-radius:50%;
	height:50px;
	
	}
div:nth-of-type(9)
{
	border-radius:100px 100px 0 0;
	height:50px;
	
	}
div:nth-of-type(10)
{
	border-radius:100px 0 0 0;
	}
div:nth-of-type(11)
{
	border-radius:100px 0 0 0;
	height:50px;
	}
div:nth-of-type(12)
{
	border-radius:100px 0 100px 0;
	}
</style>
</head>

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<img src="云课堂/image/10.jpg"/>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:42364次
    • 积分:1055
    • 等级:
    • 排名:千里之外
    • 原创:53篇
    • 转载:14篇
    • 译文:19篇
    • 评论:0条
    文章分类