第五章 CSS效果
一、效果概念
1.1、box-shadow
Box-shadow：64px 64px 24px 40px rgba(0,0,0,0.4)
Box-shadow：64px 64px 24px 40px rgba(0,0,0,0.4) inset
前两个参数表示在x轴和y轴的偏移量；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
background:red;
width:200px;
height:200px;
margin: 100px;
/*box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2);*/
box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2);
/*box-shadow: 0 0 0 5px green;*/
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
利用Box-shadow画一个叮当猫
1.2、text-shadow
不加text-shadow
加text-shadow
1.3、border-radius
如果使用px来做，由于加了边框，则计算的时候需要使用内容+边框的大小来计算。
实现扇形
红框中的写法，斜杠前的是水平方向的。斜杠后面是垂直方向上的。
1.4、background
通过渐变可以实现下面的这种效果
背景图大小的问题
首先背景图为下面的熊猫。
展示的效果如下图所示，可以看到原图被截掉了。
将背景图居中显示。
顶部对齐的方式显示。
背景图适配整个背景div。整体不拉伸的模式下全屏。
全屏，但是会把多余的图片部分切掉。
1.5、clip-path
1.6、3D变换
1.7、CSS面试
