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>
 "LeetCode 16.最接近的三数之和(C++)")