CSS|15 CSS3圆角矩形透明度
15.7 圆角矩形
border-radius:左上 右上 右下 左下; 左上开始 顺时针
比如：
border-radius: 10px 20px 30px 40px;
如果四个值都是一样的话，就可以写成：
border-radius: 20px;
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角矩形</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid #f00;
}
/*使用结构伪类选择器来匹配元素*/
div:nth-child(1){
/*border-radius:左上 右上 右下 左下;*/
border-radius: 10px 20px 30px 40px;
}
div:nth-child(2){
/*border-radius:左上 右上 右下 左下这4个值都是20px;*/
border-radius: 20px;
}
div:nth-child(3){
/*只想让左上 左下角有圆角*/
border-radius: 20px 0px 0px 20px;
}
div:nth-child(4){
/*只想让左上 右下角有圆角*/
border-radius: 20px 0px 20px 0px;
}
div:nth-child(5){
/*圆形：width和height的值一样，且border-radius的值是width的一半*/
border-radius: 50px;
background-color: #0f0;
}
div:nth-child(6){
/*椭圆：height的一半*/
width: 100px;
height: 50px;
border-radius: 25px;
}
div:nth-child(7){
/*实心的上半部分是圆形*/
width: 100px;
height: 50px;
background-color: #0f0;
/*在设置原价矩形的时候，只需要设置两个值，左上 和 右上要等于 height*/
border-radius: 50px 50px 0px 0px;
}
div:nth-child(8){
/*实心的右半部分是圆形*/
width: 50px;
height: 100px;
background-color: #00f;
/*在设置原价矩形的时候，只需要设置两个值，左上 和 右上要等于 height*/
border-radius: 0px 50px 50px 0px;
}
div:nth-child(9){
/*实心的下半部分是圆形*/
width: 100px;
height: 50px;
background-color: #ccc;
/*在设置原价矩形的时候，只需要设置两个值，左上 和 右上要等于 height*/
border-radius: 0px 0px 50px 50px;
}
div:nth-child(10){
/*实心的左半部分是圆形*/
width: 50px;
height: 100px;
background-color: #f00;
/*在设置原价矩形的时候，只需要设置两个值，左上 和 右上要等于 height*/
border-radius: 50px 0px 0px 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
案例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角矩形案例</title>
<style type="text/css">
body{
background-color: #ccc;
}
.more{
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 100px auto;
/*圆角矩形*/
border-radius: 10px;
border:1px solid #fff;
font-size:12px;
font-family: "微软雅黑";
}
.more a{
display: block;
width: 60px;
height: 30px;
border-radius: 10px;
}
.more a:link,a:visited{
color: #000;
text-decoration: none;
}
.more a:hover{
background-color: #FFA500;
}
</style>
</head>
<body>
<div class="more"><a href="#">更多</a></div>
</body>
</html>
案例三：圆形图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆形图片</title>
<style type="text/css">
img{
width: 400px;
height: 400px;
border-radius: 50%;
}
</style>
</head>
<body>
<img src="../img/jyff.jpg" alt="">
</body>
</html>
15.8 CSS透明度
只要是颜色，都可以用透明度
rgba(红色,绿色,蓝色,透明度)
a：表示透明度，透明度取值0-1之间，0表示完全透明，1表示不透明。
- 背景颜色透明
background-color:rgba(255,255,255,0.3) - 文本颜色透明
color:rgba(255,255,255,0.3) - 边框颜色透明
border:1px solid rgba(255,255,255,0.3)
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景颜色透明度</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background: rgba(255,0,0,0.5);
position: fixed;
}
</style>
</head>
<body>
<div class="box"></div>
<p>据新加坡《联合早报》网站6月9日报道，英国著名电视节目主持人迈克尔·莫斯利失踪4天后，搜救人员9日在希腊锡米岛发现他的遗体。据报道，希腊锡米岛副市长9日证实，67岁的英国电视节目主持人、健康生活倡导者莫斯利已去世，“目前不确定他是否发生了意外，或者感到身体不适”。一名警员说，搜救队伍在靠近大海的岩石地带发现莫斯利的遗体。莫斯利事发前与妻子到锡米岛度假，5日下午从圣尼古拉奥斯沿岩石海岸小路前往佩迪村，之后失踪。他当时没有携带手机。当地执法单位随即展开搜救行动。莫斯利是英国广播公司健康节目制作人，出版了多本关于健康的书籍，代表作有《轻断食》《轻健身》等，公众将他誉为“瘦身界的乔布斯”。</p>
</body>
</html>
案例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本颜色设置透明度</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
color:rgba(255,0,0,0.3);
border: 10px solid rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div class="box">文本颜色设置透明度</div>
</body>
</html>
