【CSS3】圆角

Myth丶恋晨 2022-03-12 06:57 297阅读 0赞

![在这里插入图片描述][2019030514481083.png]

### 浏览器支持 ###

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

### CSS3 border-radius 属性 ###

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

1. 指定背景颜色的元素圆角： 
 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]
2. 指定边框的元素圆角: 
 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 1]
3. 指定背景图片的元素圆角: 
 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 2] 
 代码如下:
 
 <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>
 	 border-radius 属性允许向元素添加圆角。
 	指定背景颜色元素的圆角:
 	圆角
 	指定边框元素的圆角:
 	圆角
 	指定背景图片元素的圆角:
 	圆角
 </body>

### CSS3 border-radius - 指定每个圆角 ###

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

1. 四个值 - border-radius: 15px 50px 30px 5px: 
 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 3]
2. 三个值 - border-radius: 15px 50px 30px: 
 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 4]
3. 两个值 - border-radius: 15px 50px: 
 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 5] 
 以下为源代码:
 
 <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>
 	四个值 - border-radius: 15px 50px 30px 5px:
 	
 	
 	三个值 - border-radius: 15px 50px 30px:
 	
 	
 	两个值 - border-radius: 15px 50px:
 	
 </body>

您还可以创建椭圆边角:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 8]

### CSS3 圆角属性 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 9]

[2019030514481083.png]: /images/20220312/abe059b7fc3040b99b109e0bdc0647f6.png
[20190305144857827.png]: /images/20220312/77ece3c5bd244d3fbfc9e64e2a511730.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]: /images/20220312/766d7675a51f4b5aa28faeb51e2b29b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 1]: /images/20220312/d23b92541bc741bf88141355b724ea2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 2]: /images/20220312/865dd96a55ed469c88aa7d1487a44ba6.png
[20190305145226409.png]: /images/20220312/7ca5066810a64e9c8e52a509456f52be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 3]: /images/20220312/598932785d714757b249347c23e59335.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 4]: /images/20220312/bfa9ff40d5e84ec08b56011c43b242aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 5]: /images/20220312/2ab85f4aa3ed4e92a7ae91011fdfd6cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 6]: /images/20220312/f6814c000d8c479b858b377318d39bc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 7]: /images/20220312/6a8a6e2d707343398e68872450128911.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 8]: /images/20220312/db29493654e84b1eaa0400b680bf3cbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 9]: /images/20220312/28068e92fe3b49868a404c3a5377feb7.png