css圆角矩形制作

参数:border-radius:左上 右上 右下 左下
示例:border-radius:40px 40px 0 0px; 

看源码,里面有说明
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	/*border-radius:左上 右上 右下 左下*/
    	div:first-child
    	{
    		width:500px;
    		height:150px;
    		border:1px solid blue;
    		border-radius:2px 20px 40px 60px;	
    	}
    	div:nth-child(2)
    	{
    		width:500px;
    		height:150px;
    		margin:20px 0;
    		border:1px solid blue;
    		border-radius:40px 40px 0 0px;	
    	}
    	div:nth-child(3)
    	{
    		width:500px;
    		height:150px;
    		margin:20px 0;
    		border:1px solid blue;
    		border-radius:80px;	
    	}
    	div:nth-child(4)
    	{
    		width:150px;
    		height:150px;
    		margin:20px 0;
    		border:1px solid blue;
    		border-radius:80px;	
    	}
    </style>
</head>
<body>
<div>
	圆角矩形显例
</div>	
<div>
	上方圆角,下面直角形状
</div>
<div>
	四个值设成一样的长方形,就会变按钮图标
</div>
<div>
	四个值设成一样的方形,变成圆形了 
</div>
	
</body> 
</html>
  

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND