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

前端疑难困惑小笔记2盒子阴影

box-shadow:h-shadowv-shadowblurspreadcolorinset;其中:h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴



box-shadow: h-shadow v-shadow blur spread color inset;

其中:
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影


水平阴影h-shadow:必选 正——阴影向右偏移
垂直阴影v-shadow:必选 正——阴影向下偏移
模糊距离blur : 可选
阴影大小spread: 可选
阴影颜色color:可选
设置内外阴影inset:可选 默认是外部阴影


例子:

box-shadow: 0px 0px 20px red;

模糊距离为20的单个外部阴影
在这里插入图片描述

box-shadow: 0px 0px 20px red inset;

模糊距离为20的内部阴影

在这里插入图片描述

box-shadow: 0px 0px 10px red, 5px -5px 10px blue, 10px -10px 10px yellow, 20px -20px 10px black;

多个阴影
在这里插入图片描述



推荐阅读
  • 本文详细介绍了如何在VUE开发环境中正确安装和配置Nightwatch及Karma相关插件,并解决运行测试时遇到的Java版本不兼容问题。 ... [详细]
  • 本文介绍了在 Android 开发中如何实现像素 (px)、缩放独立像素 (sp) 和密度独立像素 (dp) 之间的相互转换。这些方法对于确保应用在不同屏幕尺寸和分辨率上的适配至关重要。 ... [详细]
  • 本文探讨了通过数组操作、事件委托、插件化开发、字符串拼接优化、HTML5 Data属性的使用、优先采用原生JavaScript以及JavaScript文件的压缩等方法,来提升jQuery应用程序的性能。 ... [详细]
  • 本文详细介绍了如何通过 `vue.config.js` 文件配置 Vue CLI 的打包和代理设置,包括开发服务器配置、跨域处理以及生产环境下的代码压缩和资源压缩。 ... [详细]
  • 本文探讨了Tomcat在启动过程中遇到的‘严重: Null组件’警告,并提供了解决此问题的方法,特别是当Tomcat使用的JRE版本低于应用所需版本时的处理方案。 ... [详细]
  • 本文详细介绍了C++标准模板库(STL)中各容器的功能特性,并深入探讨了不同容器操作函数的异常安全性。 ... [详细]
  • 深入理解FastDFS
    FastDFS是一款高效、简洁的分布式文件系统,广泛应用于互联网应用中,用于处理大量用户上传的文件,如图片、视频等。本文探讨了FastDFS的设计理念及其如何通过独特的架构设计提高性能和可靠性。 ... [详细]
  • 本文详细介绍了如何在VMware环境下安装CentOS 7 Minimal,并成功配置GNOME桌面环境的过程。包括解决网络连接问题和设置默认图形界面等关键步骤。 ... [详细]
  • 学习目的:1.了解android线程的使用2.了解主线程与子线程区别3.解析异步处理机制主线程与子线程:所谓主线程,在Windows窗体应用程序中一般指UI线程,这个是程序启动的时 ... [详细]
  • 本文针对公司项目中普遍存在的IE浏览器兼容性问题,特别是IE9及以下版本,提出了具体的解决方案,确保用户在这些旧版浏览器中也能顺利实现图片上传预览功能。 ... [详细]
  • 在现代多线程编程中,Lock接口提供的灵活性和控制力超越了传统的synchronized关键字。Lock接口不仅使锁成为一个独立的对象,还提供了更细粒度的锁定机制,例如读写锁(ReadWriteLock)。本文将探讨如何利用ReentrantReadWriteLock提高并发性能。 ... [详细]
  • 无脚本 JSP 的 Web 页面设计
    探讨了Web页面设计人员是否需要掌握Java技能,以及他们如何快速学习表达式语言(EL)。虽然EL的应用前景尚不明朗,但本文将重点介绍如何通过JSP的include指令有效整合页面元素。 ... [详细]
  • 本文深入探讨了Java注解的基本概念及其在现代Java开发中的应用。文章不仅介绍了如何创建和使用自定义注解,还详细讲解了如何利用反射机制解析注解,以及Java内建注解的使用场景。 ... [详细]
  • 本文详细介绍了如何手动编写兼容IE的Ajax函数,以及探讨了跨域请求的实现方法和原理,包括JSONP和服务器端设置HTTP头部等技术。 ... [详细]
  • CSS实现文字上标与下标的技术详解
    本文将详细介绍如何利用CSS中的vertical-align属性来实现文字的上标和下标效果,包括具体的属性值及其应用方法,帮助开发者更好地掌握这一技巧。 ... [详细]
author-avatar
手机用户2602902147
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有