<!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>Document</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid black;
/* 1、border-radius:圆角的半径，圆形：50% */
/* 四个值：左上、右上、右下、左下 */
/* 两个值：左上右下、右上左下 */
border-radius: 50%;
/* 2、box-shadow:x轴、y轴、模糊半径、颜色 */
box-shadow: 5px 5px 5px #333;
/* 3、形变 */
/* rotate(45deg):旋转45度 */
transform: rotate(45deg);
/* scale(1.5)：放大1.5倍 */
transform: scale(1.5);
/* translate(50%,50%)：x轴移动50%，y轴移动50% */
transform: translate(50%, 50%);
/* 多个形变 */
transform: rotate(45deg) scale(1.5) translate(100%, 50%);
}
/* 垂直水平居中 */
.box {
position: absolute;
/* 左上角那个点水平居中 */
top: 50%;
left: 50%;
/* x、y轴向左上角移动，把中心点回归到盒子中间 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
