CSS的阴影

所属专栏:前端只因变凤凰之路
作者简介:rchjr——五带信管菜只因一枚
前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~
文章简介:本文介绍CSS的阴影效果。知识学习内容来自b站的 @黑马程序员 的视频

CSS的阴影效果包括盒子阴影和文字阴影两种

盒子阴影

CSS借助box-shadow属性来设置盒子的阴影

h-shadow

阴影在水平方向的位置

v-shadow

阴影在垂直方面的位置

blur

阴影的虚实程度

spread

阴影的大小

color

阴影的颜色

inset

把阴影改成内部(一般默认是外部outset,不建议添加)





    
    
    
    Document
    



    
CSS的阴影_第1张图片

如何实现选中盒子才显示阴影

和伪类选择器类似,为div添加:hover。(注意:任何盒子都可以这样写,利用伪类选择器实现)见下面的代码





    
    
    
    Document
    



    

阴影不占据位置,所以不用担心影响盒子的大小

盒子添加阴影不会改变自身大小,可以放心添加。

文字阴影

可以利用text-shadow来设置文本的阴影

h-shadow

阴影在水平方向的位置

v-shadow

阴影在垂直方面的位置

blur

阴影的虚实程度

spread

阴影的大小

在实际开发用的不多





    
    
    
    Document
    



    
我是阴影,你是火影
CSS的阴影_第2张图片

你可能感兴趣的:(前端只因变凤凰之路,css,前端,css阴影,盒子阴影,文字阴影)