<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>box</title>
<style>
h3,p{
border:1px solid red;/* 边框粗细,边框样式,边框颜色 */
width:100px;/* 宽度 */
height:100px;/* 高度 */
margin:0px auto;/* 外边距(上右下左) auto:自动; */
padding:0px;/* 内边距:0px清除内边距; */
box-sizing:border-box;/* 重新解析盒子模型的计算方式 */
border-radius:10px;/* 圆角边框：50%为圆形 */
box-shadow:inset 4px 5px 6px blue;/* 盒子阴影:inset是内部阴影默认是外部阴影,x轴和y轴的偏移量,模糊半径,阴影颜色要想设置多层阴影只需用逗号隔开接着写就行了 */
}
div{
border:1px solid blue;
width:50px;
height:100px;
border-radius:50px 0 0 50px;/* 半圆 */
}
</style>
</head>
<body>
<h3>你好,这是一个盒子</h3>
<p>我也是一个盒子</p>
<div>
我还是一个盒子
</div>
</body>
</html>盒子模型内容和概念比较多，只要是网页设计都会用到盒子模型，非常重要，这里只写了一部分基础的使用方法，更多的使用方法可以去w3c看看。