drawable如何只让两个叫圆角_CSS3设置圆角边框圆角特效代码 CSS3的圆角border-radius属性...

最新推荐文章于 2024-04-12 22:35:54 发布

weixin_39941620

最新推荐文章于 2024-04-12 22:35:54 发布

阅读量396

点赞数

文章标签： drawable如何只让两个叫圆角

本文链接：https://blog.csdn.net/weixin_39941620/article/details/112198427

版权

本文详细介绍了CSS3的border-radius属性，用于为元素添加圆角效果。通过该属性，可以分别设置元素的左上、右上、右下和左下角的圆角大小，也可以用简写形式指定圆角。文中列举了多个实例，包括不同数量的值来指定不同角落的圆角，帮助理解其用法。

摘要由CSDN通过智能技术生成

CSS3设置圆角边框 css3圆角特效代码

CSS3 `border-radius` 属性

使用 CSS3 `border-radius` 属性，你可以给任何元素制作 "圆角"。

border-radius 属性允许向元素添加圆角。

CSS3 圆角属性

| 属性 | 描述 |

| `border-radius` | 所有四个边角 `border-*-*-radius` 属性的缩写 |

| `border-top-left-radius` | 定义了左上角的弧度 |

| `border-top-right-radius` | 定义了右上角的弧度 |

| `border-bottom-right-radius` | 定义了右下角的弧度 |

| `border-bottom-left-radius` | 定义了左下角的弧度 |

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

指定边框元素的圆角:

指定背景图片元素的圆角:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>码灵程序员导航(//nav.imaring.com/)</title> 
<style> 
#imaring1 {
    border-radius: 25px;
    background: rgba(223, 56, 151, 0.75);
    padding: 20px; 
    width: 800px;
    height: 150px;    
}

#imaring2 {
    border-radius: 25px;
    border: 2px solid rgba(223, 56, 151, 0.75);
    padding: 20px; 
    width: 796px;
    height: 150px;    
}

#imaring3 {
    border-radius: 25px;
    background: url(https://public.imaring.com/images/imaring.png);
	background-size: 100% auto;
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 800px;
    height: 150px;  
	color: rgba(223, 56, 151, 0.75)
}
</style>
</head>
<body>

<p> border-radius 属性允许向元素添加圆角。</p>
<p>指定背景颜色元素的圆角:</p>
<p id="imaring1">背景圆角 - imaring.com</p>
<p>指定边框元素的圆角:</p>
<p id="imaring2">边框圆角 - imaring.com</p>
<p>指定背景图片元素的圆角:</p>
<p id="imaring3">背景图片圆角 - imaring.com</p>

</body>
</html>

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

如果你在 `border-radius` 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

以下为三个实例:

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

2. 三个值 - border-radius: 15px 50px 30px:

3. 两个值 - border-radius: 15px 50px:

以下为源代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>码灵程序员导航(//nav.imaring.com/)</title> 
<style> 
#imaring4 {
    border-radius: 15px 50px 30px 5px;
    background: rgba(223, 56, 151, 0.75);
    padding: 20px; 
    width: 400px;
    height: 150px; 
}

#imaring5 {
    border-radius: 15px 50px 30px;
    background: rgba(223, 56, 151, 0.75);
    padding: 20px; 
    width: 400px;
    height: 150px; 
}

#imaring6 {
    border-radius: 15px 50px;
    background: rgba(223, 56, 151, 0.75);
    padding: 20px; 
    width: 400px;
    height: 150px; 
} 
</style>
</head>
<body>

<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="imaring4"></p>

<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="imaring5"></p>

<p>两个值 - border-radius: 15px 50px:</p>
<p id="imaring6"></p>

</body>
</html>

小编推荐：nav.imaring.com