css实现文字阴影，以及边框阴影

1、文字阴影（text-shadow: 1px 1px 1px lightgray）

text-shadow: 1px 1px 1px lightgray；

第一个1px:是向x坐标方向的偏移

第二个1px;是向y坐标方向的偏移

第三个1px；是模糊距离

第四的参数：颜色

例：

1、

    
    
    
    

静夜思

床前明月光

疑是地上霜

举头望明月

低头思故乡

效果：

 

此例中：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实现鼠标放在立方体上进行旋转，以及发出边框的阴影效果）

    
    


    

        

1

        

2

        

3

        

4

        

5

        

6