css实现文字阴影，以及边框阴影
作者：互联网
1、文字阴影（text-shadow: 1px 1px 1px lightgray）
text-shadow: 1px 1px 1px lightgray；
第一个1px:是向x坐标方向的偏移
第二个1px;是向y坐标方向的偏移
第三个1px；是模糊距离
第四的参数：颜色
例：
1、
<!DOCTYPE html>
<html>
<head>
<title>shadow</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
@keyframes move{
from{
background-position: 0 0;
}
to{
background-position: 0 100px;
}
}
*{
margin: 0;
margin: 0;
}
p{
width: 500px;
height: 130px;
line-height: 100px;
text-align: center;
font-size: 80px;
}
p:nth-of-type(1){
background-color: tan;
background-image: linear-gradient(red,orange,yellow,yellowgreen,skyblue,pink);
-webkit-background-clip: text;
color: transparent;
animation: move 2s linear infinite;
}
p:nth-of-type(2){
background-color: #555;
text-shadow: 1px 1px 1px lightgray, -1px -1px 1px #aaa;
}
p:nth-of-type(3){
background-color: #ccc;
color: #fff;
text-shadow:0 1px 0 #eee,
0 2px 0 #ccc,
0 3px 0 #bababa,
0 4px 0 #aaa,
0 5px 0 #999,
0 6px 0 #888,
0 7px 0 #777;
}
p:nth-of-type(4){
background-color: #000;
color: #fff;
text-shadow: 5px 5px 15px hotpink,
-5px 5px 35px hotpink,
5px -5px 35px hotpink,
-5px -5px 35px hotpink;
}
p:nth-of-type(5){
background-color: #ccc;
color: transparent;
text-shadow: 0 0 10px hotpink;
}
</style>
</head>
<body>
<p>静夜思</p>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
</html>
效果：
此例中：background-image: linear-gradient(red,orange,yellow,yellowgreen,skyblue,pink);
这个是进行线性的渐变，渐变作为背景的图片使用，渐变有线性渐变和径向渐变（radial-gradient）
animation:ma,e duration timing-function delay itera-count direction fill-mode;
name:动画名
duration:动画时间
tme-function:速度曲线(ease,ease-in.ease-out,linear,实际上可以写成一个贝塞尔曲线)
delay:动画延迟
iteration-count:动画次数
direction:动画是否反向
fill-mode:是否保留最后一整动画：如果保留值为forword
使用到了动画：动画的css样式：
@keyframes move{
from{
background-position: 0 0;
}
to{
background-position: 0 100px;
}
}
进行背景的剪切：
-webkit-background-clip: text;
2、边框阴影（box-shadow: 30px 30px 80px black）
box-shadow: 30px 30px 80px black；
第一个参数：x方向上的偏移
第二个参数；y方向上的偏移
第三个参数：模糊距离
第四个参数：颜色
例：（两个立方体的嵌套，用hover实现鼠标放在立方体上进行旋转，以及发出边框的阴影效果）
<!DOCTYPE html>
<html>
<head>
<title>this is secend day</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: black;
}
#wrap{
width: 200px;
height: 200px;
position: relative;
margin: 0 auto;
transition: 4s;
transform-style: preserve-3d;
}
#wrap:hover{
transform: rotateX(360deg) rotateY(720deg);
}
#wrap div{
width: 200px;
height: 200px;
text-align:center;
font-size: 160px;
position: absolute;
margin-top: 50px;
}
#wrap div:nth-of-type(1){
margin-top: 130px;
margin-left: 100px;
transform:rotateX(90deg) translateZ(100px);
background-color: black;
}
#wrap div:nth-of-type(2){
margin-top: 130px;
margin-left: 100px;
transform:rotateX(-90deg) translateZ(100px);
background-color: yellow;
}
#wrap div:nth-of-type(3){
margin-top: 130px;
margin-left: 100px;
transform:rotateY(90deg) translateZ(100px);
background-color: red;
}
#wrap div:nth-of-type(4){
margin-top: 130px;
margin-left: 100px;
transform:rotateY(-90deg) translateZ(100px);
background-color: pink;
}
#wrap div:nth-of-type(5){
margin-top: 130px;
margin-left: 100px;
transform:translateZ(100px);
background-color: green;
}
#wrap div:nth-of-type(6){
margin-top: 130px;
margin-left: 100px;
transform:rotateX(180deg) translateZ(100px);
background-color: blue;
}
#wrap:hover div:nth-of-type(1){
transform:rotateX(90deg) translateZ(100px);
background-color: black;
box-shadow: 30px 30px 80px black,-30px -30px 80px black,-30px 30px 80px black,30px -30px 80px black;
}
#wrap:hover div:nth-of-type(2){
transform:rotateX(-90deg) translateZ(100px);
background-color: yellow;
box-shadow: 30px 30px 80px yellow,-30px -30px 80px yellow,-30px 30px 80px yellow,30px -30px 80px yellow;
}
#wrap:hover div:nth-of-type(3){
transform:rotateY(90deg) translateZ(100px);
background-color: red;
box-shadow: 30px 30px 80px red,-30px -30px 80px red,-30px 30px 80px red,30px -30px 80px red;
}
#wrap:hover div:nth-of-type(4){
transform:rotateY(-90deg) translateZ(100px);
background-color: pink;
box-shadow: 30px 30px 80px pink,-30px -30px 80px pink,-30px 30px 80px pink,30px -30px 80px pink;
}
#wrap:hover div:nth-of-type(5){
transform:translateZ(100px);
background-color: green;
box-shadow: 30px 30px 80px green,-30px -30px 80px green,-30px 30px 80px green,30px -30px 80px green;
}
#wrap:hover div:nth-of-type(6){
transform:rotateX(180deg) translateZ(100px);
background-color: blue;
box-shadow: 30px 30px 80px blue,-30px -30px 80px blue,-30px 30px 80px blue,30px -30px 80px blue;
}
#wrap div:nth-of-type(7){
width: 400px;
height: 400px;
transform:rotateX(90deg) translateZ(200px);
background-color: black;
opacity: 0.5;
}
#wrap div:nth-of-type(8){
width: 400px;
height: 400px;
transform:rotateX(-90deg) translateZ(200px);
background-color: yellow;
opacity: 0.5;
}
#wrap div:nth-of-type(9){
width: 400px;
height: 400px;
transform:rotateY(90deg) translateZ(200px);
background-color: red;
opacity: 0.5;
}
#wrap div:nth-of-type(10){
width: 400px;
height: 400px;
transform:rotateY(-90deg) translateZ(200px);
background-color: pink;
opacity: 0.5;
}
#wrap div:nth-of-type(11){
width: 400px;
height: 400px;
transform:translateZ(200px);
background-color: green;
opacity: 0.5;
}
#wrap div:nth-of-type(12){
width: 400px;
height: 400px;
transform:rotateX(180deg) translateZ(200px);
background-color: blue;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
标签：color,边框,nth,80px,background,阴影,type,30px,css 来源： https://blog.csdn.net/wenge1477/article/details/86499639