热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css如何实现阴影效果

方法:1、使用text-shadow属性,语法“text-shadow:水平阴影垂直阴影模糊距离颜色;”;2、使用box-shadow属性,语法“box-shadow:水平阴影垂直阴影模糊距离阴影大小颜色inset;”。

方法:1、使用text-shadow属性,语法“text-shadow: 水平阴影 垂直阴影 模糊距离 颜色;”;2、使用box-shadow属性,语法“box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 颜色 inset;”。


    
        
         
         
     
     
        

文本阴影!

  • h-shadow:设置水平阴影的位置,允许负值;必需值,不可省略。

  • v-shadow:设置垂直阴影的位置,允许负值;必需值,不可省略。

  • blur:设置模糊距离;可选值,可省略。

  • spread:设置阴影的大小;可选值,可省略。

  • color:设置阴影的颜色;可选值,可省略。

  • inset:设置从外层的阴影(开始时)改变阴影内侧阴影;可选值,可省略。

示例:


    
        
        
        
    
    
        

(学习视频分享:css视频教程)

以上就是css如何实现阴影效果的详细内容,更多请关注其它相关文章!


推荐阅读
author-avatar
张琪健V
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有