【CSS3】圆角

最新推荐文章于 2024-09-08 07:29:49 发布

韩韩二水

最新推荐文章于 2024-09-08 07:29:49 发布

阅读量1.1k

点赞数

分类专栏： CSS CSS3

本文链接：https://blog.csdn.net/weixin_43885779/article/details/88182547

版权

CSS 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

CSS3

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。
-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。
在这里插入图片描述

CSS3 border-radius 属性

使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。
以下为三个实例：

指定背景颜色的元素圆角：
指定边框的元素圆角:

指定背景图片的元素圆角:
在这里插入图片描述
代码如下:

 <style> 
 #rcorners1 {
     border-radius: 25px;
     background: #8AC007;
     padding: 20px; 
     width: 200px;
     height: 150px;    
 }
 
 #rcorners2 {
     border-radius: 25px;
     border: 2px solid #8AC007;
     padding: 20px; 
     width: 200px;
     height: 150px;    
 }
 
 #rcorners3 {
     border-radius: 25px;
     background: url(/images/paper.gif);
     background-position: left top;
     background-repeat: repeat;
     padding: 20px; 
     width: 200px;
     height: 150px;    
 }
 </style>
 <body>
 	<p> border-radius 属性允许向元素添加圆角。</p>
 	<p>指定背景颜色元素的圆角:</p>
 	<p id="rcorners1">圆角</p>
 	<p>指定边框元素的圆角:</p>
 	<p id="rcorners2">圆角</p>
 	<p>指定背景图片元素的圆角:</p>
 	<p id="rcorners3">圆角</p>
 </body>

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
在这里插入图片描述
以下为三个实例:

四个值 - border-radius: 15px 50px 30px 5px:
三个值 - border-radius: 15px 50px 30px:

两个值 - border-radius: 15px 50px:
在这里插入图片描述
以下为源代码:

 <style> 
 #rcorners4 {
     border-radius: 15px 50px 30px 5px;
     background: #8AC007;
     padding: 20px; 
     width: 200px;
     height: 150px; 
 }
 
 #rcorners5 {
     border-radius: 15px 50px 30px;
     background: #8AC007;
     padding: 20px; 
     width: 200px;
     height: 150px; 
 }
 
 #rcorners6 {
     border-radius: 15px 50px;
     background: #8AC007;
     padding: 20px; 
     width: 200px;
     height: 150px; 
 } 
 </style>
 <body>
 	<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
 	<p id="rcorners4"></p>
 	
 	<p>三个值 - border-radius: 15px 50px 30px:</p>
 	<p id="rcorners5"></p>
 	
 	<p>两个值 - border-radius: 15px 50px:</p>
 	<p id="rcorners6"></p>
 </body>

您还可以创建椭圆边角:

	<style> 
	#rcorners7 {
	    border-radius: 50px/15px;
	    background: #8AC007;
	    padding: 20px; 
	    width: 200px;
	    height: 150px; 
	}
	#rcorners8 {
	    border-radius: 15px/50px;
	    background: #8AC007;
	    padding: 20px; 
	    width: 200px;
	    height: 150px; 
	}
	
	#rcorners9 {
	    border-radius: 50%;
	    background: #8AC007;
	    padding: 20px; 
	    width: 200px;
	    height: 150px;
	} 
	</style>
	<body>
		<p>椭圆边框 - border-radius: 50px/15px:</p>
		<p id="rcorners7"></p>

		<p> 椭圆边框 - border-radius: 15px/50px:</p>
		<p id="rcorners8"></p>
		
		<p>椭圆边框 - border-radius: 50%:</p>
		<p id="rcorners9"></p>
	</body>

在这里插入图片描述