目录
阴影（shadow)
box-shadow、text-shadow
实例：实现效果
text-stroke:
渐变（gradient）
linear-gradient、radial-gradient
过渡（transition）
变形（transform）
滤镜（filter）
阴影（shadow)
box-shadow、text-shadow
格式： 阴影：横向偏移量 纵向偏移量 模糊距离 阴影颜色
<!DOCTYPE html><html><head><meta charset="utf-8"><title>shadow</title><style type="text/css">div{width: 300px;height: 300px;background-color: cyan;box-shadow: 50px 50px 100px tomato;}p{font-size: 2em;text-shadow: 5px 5px 5px gray;}section{width: 100px;height: 100px;background-color: pink;}section:hover{cursor: pointer;box-shadow: 0 8px 10px gray;}</style></head><body><div></div><p>感谢感谢感谢感谢</p><section></section></body></html>
实例：实现效果
代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>静夜思</title><style type="text/css">*{margin: 0;padding: 0;list-style: none;}html{font-size: 62.5%;}p{height: 100px;width: 500px;line-height: 100px;text-align: center;margin: 0 auto;font-size: 7rem;}p:nth-of-type(1){background-color: #d5d2d2;color: transparent;-webkit-text-stroke:1px black;}p:nth-of-type(2){background-color: #454545;color: #333;text-shadow: -1px -1px 0 #cecece,1px 1px 0 #5c5c5c;}p:nth-of-type(3){background-color: #000;color: #fff;text-shadow:-5px -5px 8px #cd12c8,5px -5px 8px #cd12c8,-5px 5px 8px #cd12c8,5px 5px 8px #cd12c8;}p:nth-of-type(4){background-color: #ccc;color: #fff;text-shadow:0 1px 0 #eee,0 2px 0 #bcbcbc,0 3px 0 #aaa,0 4px 0 #999,0 5px 0 #787878,0 6px 0 #666;}p:nth-of-type(5){background-color: #eee;color: rgba(255,255,255,0);text-shadow:0 0 10px hotpink;}</style></head><body><p>静夜思</p><p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body></html>
text-stroke:
字体边框，有些游览器不兼容
渐变（gradient）
linear-gradient、radial-gradient
背景图：渐变(方向, 颜色1 百分比, 颜色2 百分比 ,…)
<!DOCTYPE html><html><head><meta charset="utf-8"><title>gradient</title><style type="text/css">div{width: 500px;height: 200px;background-color: tomato;margin-bottom: 100px;}div:nth-of-type(1){background-image: -webkit-linear-gradient(left,cyan 20%,gold 50%,tomato,hotpink);background-image: linear-gradient(left,cyan 20%,gold 50%,tomato,hotpink);}div:nth-of-type(2){background-image: radial-gradient(left top,cyan ,gold ,orange,hotpink);background-image: -webkit-radial-gradient(left top,cyan ,gold,orange ,hotpink);}.ch{background-image: -webkit-radial-gradient(center bottom,purple,deepskyblue,cyan,green,yellow,orange);background-image: radial-gradient(center bottom,purple,deepskyblue,cyan,green,yellow,orange);}</style></head><body><div></div><div></div><div class="ch"></div></body></html>
过渡（transition）
在不适用动画的情况下变换状态
transition:all 1s 0.1s linear 顺序：属性名 时间 延迟时间 速度曲线
transition-property:设置过渡的属性
值 全部css属性
transition-duration：定义过渡时间
transition-delay：定义延时执行时间
transition-timing-function:过渡效果的时间曲线
transition-timing-function:值：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>过渡transition</title><style type="text/css">div{width: 100px;height: 200px;background-color: cyan;transition: .3s;}div:hover {/* 光标 */cursor: pointer;width: 300px;height: 400px;background-color: pink;}</style></head><body><div></div></body></html>
变形（transform）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>变形transform</title><style type="text/css">div{width: 200px;height: 200px;background-image: url(../2.2.3/img/pic/7.jpg);background-size: cover;transition: .5s;}div:hover{/* 平移 *//* transform:translateY(100px); *//* 旋转 deg turn grad *//* transform: rotate(180deg); *//* transform: rotate(.5turn); *//* transform: rotate(200grad); *//* 缩放 *//* transform: scale(.2); *//* transform: scale(2); *//* 倾斜 */transform: skew(30deg);}section{width: 200px;height: 200px;line-height: 200px;color: white;text-align: center;background-color: deeppink;margin-left: 100px;transform-origin: left top;transition: .5s;}section:hover{transform: rotate(-360deg);}</style></head><body><div></div><p>知了堂</p><section>Hello</section></body></html>
滤镜（filter）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>filter过滤</title><style type="text/css">div{width: 200px;height: 200px;background-image: url(../2.2.3/img/icon/4.png);background-size: cover;/* 模糊 *//* filter: blur(10px); *//* 亮度 *//* filter: brightness(2); *//* 对比度 *//* filter: contrast(.5); *//* 阴影 *//* filter: drop-shadow(5px 5px 5px tomato); *//* 灰度 *//* filter: grayscale(1); *//* 色相转变 *//* filter: hue-rotate(70deg); *//* 反转 *//* filter: invert(1); *//* 透明度 *//* filter: opacity(.25); *//* 饱和度 *//* filter: saturate(4); *//* 褐色 *//* filter: sepia(1); */}section{width: 200px;height: 200px;background-color: red;/* filter: hue-rotate(90deg); */transition: 2s;}section:hover{filter: hue-rotate(360deg);}</style></head><body><div></div><section></section></body></html>
