一、box-shadow 边框阴影
box-shadow:h v blur spread color insert
h:水平方向偏移值 x轴→为正方向
v:垂直方向偏移值 y轴↓为正方向
blur:柔和模糊值(px)--可选 默认0
spread:阴影的尺寸,扩展阴影(阴影尺寸可扩张收缩)--可选 默认0
color:阴影颜色--可选 默认黑色
inset:内阴影--可选 默认是外阴影
二、border-radius 圆角
右边的值其实就是以多大半径画圆与方盒子相切出来的弧
语法: 先上下再左右(上右下左)
border-top-left-radius:20px;
border-radius:top right bottom left;
- demo
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*设置圆角 左上角以半径50画圆*/
border-top-left-radius: 50px;
/*设置圆角 右下角以半径100画圆*/
border-bottom-right-radius: 100px;
}
</style>
<body>
<div></div>
</body>
三、圆角实现小机器人
思路:
1.通过设置圆角做小机器人的圆边
2.使用伪元素做小眼睛