一、首先创建一个盒子
用div创建一个盒子
<div class="xiaoma"></div>
二、给盒子一个尺寸
设置盒子的宽度(width)和高度(height)。
width: 100px; height: 100px;
三、给盒子一个背景颜色
设置自己喜欢的盒子的背景颜色
background-color: pink;
四、给盒子倒圆角
1.四个角全部倒圆角
border-radius: 20px;
2.四个角分别设置
border-radius: 10px 20px 30px 40px;
3.倒角成一个圆
写成像素格式,将大小设置为盒子的一般大小
border-radius: 50px;
或者可以写成百分比的形式
border-radius: 50%;
五、设置盒子阴影
给盒子设置一个阴影,盒子的阴影(box-shadow)包括以下6个参数:
1 | h-shadow | 必需。水平阴影位置。允许负值。 |
2 | v-shadow | 必需。垂直阴影的位置。允许负值。 |
3 | blur | 可选。模糊距离 |
4 | spread | 可选。阴影的尺寸. |
5 | color | 可选。阴影的颜色。请参阅 CSS 颜色值 |
6 | inset | 可选。将外部阴影(outset) 改为内部阴影 |
box-shadow: 10px 10px 10px 3px rgba(0,0,0,0.3);
注意:一般颜色我们用rgba()来设置阴影的颜色。