drawable如何只让两个叫圆⾓_CSS3设置圆⾓边框圆⾓特效代
码CSS3的圆⾓bord。。。
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/)</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(public.imaring/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>
border radius什么意思<p id="imaring1">背景圆⾓ - imaring</p>
<p>指定边框元素的圆⾓:</p>
<p id="imaring2">边框圆⾓ - imaring</p>
<p>指定背景图⽚元素的圆⾓:</p>
<p id="imaring3">背景图⽚圆⾓ - imaring</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/)</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
作为⼀名码农，随着平时⼯作的需要，这⾥收集了国内外很多优秀⽹站，这其中包括在线⼯具、在线运⾏、免费接⼝、在线资源、在线学习、技术论坛、技术博客等等，满⾜⼀般程序员⽇常需求。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。