CSS效果

盒子阴影 box-shadow

box-shadow: 0 0 30px 10px pink inset;
0 0 偏移量  30px 模糊大小  10px阴影扩展大小。pink阴影颜色。 inset内阴影。

边框圆角 border-radius

10px/20px 代表前面是水平方向圆角半径。后面是垂直方向圆角半径。
可以制作各种圆角的图像 ，如图

背景 background

background详细链接
值说明 CSS
background-color 指定要使用的背景颜色 1
background-position 指定背景图像的位置 1
background-size 指定背景图片的大小 3
background-repeat 指定如何重复背景图像 1
background-origin 指定背景图像的定位区域 3
background-clip 指定背景图像的绘画区域 3
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-image 指定要使用的一个或多个背景图像

clip-path 裁剪路径

clip-path在线生成器
原理：
利用clip-path绘制一个三角形，每个点用逗号分开，数值（50%，0）可以理解为坐标（x，y）

三个点形成一个闭合区域，这也是页面所显示出来的区域，形成遮罩的效果

三角形绘制的大概的坐标模型，起点为元素的左上角，所以形成的是一个向下发展的坐标系
三角形： clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

语法

Keyword values */
clip-path: none;

/* Image values */ 
clip-path: url(resources.svg#c1);

/* Box values
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;

/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

裁剪路径过渡动画

clip-path可以实现多边形变换，折叠效果（两个点的坐标交换），很多有趣的图像变换动画。

.container{
	 clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
	 }
.container:hover{
     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     }

参考文章：https://www.cnblogs.com/liangdecha/p/9629150.html

transfrom

菜鸟教程详细属性
translate 平移
scale 缩放
rotate 旋转
skew 斜切