标签：圆角 solid auto 边框 10px margin border CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒模型练习</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: blueviolet;
/* 实线边框 */
/* border-style: solid; */
/* 虚线边框 */
/* border-style: dashed; */
/* 点线边框 */
/* border-style: dotted; */
/* 边框宽度 */
/* border-width: 10px; */
/* 边框颜色 */
/* border-color: black; */
/* 边框圆角 */
border-radius: 10px;
/* 取消四个边框 */
/* border: none; */
/* 上边框 */
/* border-top: 10px solid red; */
/* 左边框 */
/* border-left: 10px solid red; */
/* 右边框 */
/* border-right: 10px solid red; */
/* 下边框 */
/* border-bottom: 10px solid red; */
/* 简单写法 */
/* border: 10px solid red; */
/* 上下左右都是20像素内边距 */
/* padding: 20px; */
/* 上下是10，左右是20的内边距 */
/* padding: 10px 20px; */
/* 上10，左右20，下30 */
/* padding: 10px 20px 30px; */
/* 顺时针 10 20 30 40 */
/* padding: 10px 20px 30px 40px; */
/* 让块级盒子水平居中对齐 */
/* margin-left: auto;
margin-right: auto; */
/* margin: 0 auto; */
/* margin: auto; */
/* 让块级盒子垂直居中对齐 */
/* margin-top: auto;
margin-bottom: auto; */
/* 文字 行内元素 行内块元素水平居中 */
/* text-align: center; */
/* 块级盒子水平居中 左右margin改为auto */
/* margin: 10px auto; */
}
</style>
</head>
<body>
<div class="box">哈哈哈哈</div>
</body>
</html>
标签：圆角,
solid,
auto,
边框,
10px,
margin,
border,
CSS
From： https://www.cnblogs.com/clswhde/p/18403907