<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框</title>
<style>
p {
width: 200px; 调整段落宽度
height: 40px; 调整段落高度
/* 单行文本垂直居中 */
line-height: 40px;
border: 3px solid red;
/* 设置边框弧度 */
border-radius: 30px;
}
![](https://img-blog.csdnimg.cn/img_convert/ee44bc32f17d4cc4307d3abcf20dbf2d.png)
/* 设置圆:width=height
border-radius=半径=一半的宽高 */
div.cri {
background-color: pink;
width: 200px;
height: 200px;
/* 50%:是指当前元素的宽高的50% */
border-radius: 50%;
border-radius: 50% 50% 50% 50%;
}
![](https://img-blog.csdnimg.cn/img_convert/635306a8d886fb530b59a86330f7c4f3.png)
/* 设置半圆:上半圆 */
div.cri1 {
width: 200px;
height: 100px;
background-color: yellowgreen;
/* 左上和右上=》大小应该是半径
border-radius的值=半径*/
border-radius: 100px 100px 0 0;
}
![](https://img-blog.csdnimg.cn/img_convert/f65a7d8e22ce5a41c67f4b161d899922.png)
/* 设置四份之一圆 左上*/
div.cri2 {
width: 100px;
height: 100px;
background-color: gold;
border-radius: 100px 0 0 0;
border-radius: 100% 0 0 0;
}
![](https://img-blog.csdnimg.cn/img_convert/93a1f447c3cdb9ab421095f24b06ea9d.png)
/* 通过边框设置三角形:
注意:1.元素宽高设置为0
2.通过透明色要设置 */
.squ {
/* width: 10px;
height: 10px; */
width: 0;
height: 0;
border: 20px solid red;
border-color: red yellowgreen blue gold;
border-color: transparent transparent blue transparent;
/* border-width: 0 0 20px 0; */
}
![](https://img-blog.csdnimg.cn/img_convert/c43df3dc9c3b0fdca754edf9765c81b9.png)
.fa{width: 200px;
height: 200px;
background-color: red;
margin-left: 100px;
padding-top: 75px;
padding-left: 75px;
/* padding-left: 50px; */
/* 父代左右距离 */
box-sizing: border-box;
}
.son{
width: 50px;
height: 50px;
background-color: green;
/* margin-left: 50px; */
/* margin-left: 50px; */
/* 子代左右距离 */
}
![](https://img-blog.csdnimg.cn/img_convert/4c15f18fe41f16ecc9e557d8fea6dc0a.png)
</style>
</head>
<body>
<!-- 1.边框弧度
border-radius:左上 右上 右下 左下 -->
<p>让害毒,身变。</p>
<div class="cri"></div>
<div class="cri1"></div>
<div class="cri2"></div>
<br>
<hr>
<!-- 小三角形 -->
<div class="squ"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="fa">
<div class="son">
</div>
</div>
</body>
</html>