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 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
-
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
-
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
-
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
-
一个值： 四个圆角值相同
以下为三个实例:
-
四个值 - border-radius: 15px 50px 30px 5px:
指定背景颜色元素的圆角
-
三个值 - border-radius: 15px 50px 30px:
指定背景颜色元素的圆角
- 两个值 - 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>
小编推荐：程序员导航
作为一名码农，随着平时工作的需要，这里收集了国内外很多优秀网站，这其中包括在线工具、在线运行、免费接口、在线资源、在线学习、技术论坛、技术博客等等，满足一般程序员日常需求。
网友评论