<!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;
}
/* 设置圆：width=height
border-radius=半径=一半的宽高 */
div.cri {
background-color: pink;
width: 200px;
height: 200px;
/* 50%:是指当前元素的宽高的50% */
border-radius: 50%;
border-radius: 50% 50% 50% 50%;
}
/* 设置半圆：上半圆 */
div.cri1 {
width: 200px;
height: 100px;
background-color: yellowgreen;
/* 左上和右上=》大小应该是半径
border-radius的值=半径*/
border-radius: 100px 100px 0 0;
}
/* 设置四份之一圆 左上*/
div.cri2 {
width: 100px;
height: 100px;
background-color: gold;
border-radius: 100px 0 0 0;
border-radius: 100% 0 0 0;
}
/* 通过边框设置三角形：
注意：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; */
}
.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; */
/* 子代左右距离 */
}
</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>
1077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
