资讯专栏INFORMATION COLUMN

简单上手CSS-Shadow

Java3y / 3221人阅读

摘要:的属性谁都知道,大家肯定也都用过。基本参数必需。水平阴影的位置。允许负值必需。阴影的尺寸可选。请参阅颜色值可选。将外部阴影改为内部阴影后来慢慢记住前个基本参数后才发现还有内外阴影,叠加阴影的使用。

CSS 的 Shadow属性谁都知道,大家肯定也都用过。

我在学习这个属性的时候 经常记不住它的几个语法参数,随笔记录下我的学习笔记。

基本参数
box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值

v-shadow 必需。垂直阴影的位置。允许负值

blur 可选。模糊距离

spread 可选。阴影的尺寸

color 可选。阴影的颜色。请参阅 CSS 颜色值

inset 可选。将外部阴影 (outset) 改为内部阴影

后来慢慢记住前5个基本参数后才发现还有内外阴影,叠加阴影的使用。

叠加阴影

调试工具

以及使用调试工具快速调试阴影参数的方法:

想要什么效果,直接拖动蓝色圆点即可,哪怕忘了参数也么得问题!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114394.html

相关文章

  • Nowa 上手篇(1)- 介绍

    摘要:上手篇介绍上手篇创建项目上手篇工具使用指南上手篇巧用命令集的意思是,其实笔者第一次接触到它的时候,还以为是诺娃的意思,可能是纪念开发者的媳妇儿,开个小玩笑。怎么用请看接下来的上手篇创建项目。 这个专题主要是详细介绍 Nowa 工具,为此码字无数。 Nowa 上手篇(1)- 介绍 Nowa 上手篇(2)- 创建 React Web 项目 Nowa 上手篇(3)- 工具使用指南 Nowa...

    Taonce 评论0 收藏0
  • Nowa 上手篇(2)- 创建 React Web 项目

    摘要:如果项目之前已经存在,会弹窗提示用户是否覆盖安装。静静等待依赖安装安装结束之后,项目会自动导入到左侧的项目列表中。再次点击停止按钮,会结束对项目的监听。 本系列文章,不断更新中... Nowa 上手篇(1)- 介绍 Nowa 上手篇(2)- 创建 React Web 项目 Nowa 上手篇(3)- 工具使用指南 Nowa 上手篇(4)巧用命令集 ... 在看完废话超多的介绍篇后,欢...

    oysun 评论0 收藏0
  • 比Redux更容易上手的状态管理库

    摘要:前言当项目越发复杂时,我们发现仅仅是提升状态已经无法适应如此复杂的状态管理了,程序状态变得比较难同步,操作,到处是回调,发布,订阅,这意味着我们需要更好的状态管理方式,于是就引入了状态管理库,如,,,等。 前言 当项目越发复杂时,我们发现仅仅是提升状态已经无法适应如此复杂的状态管理了,程序状态变得比较难同步,操作,到处是回调,发布,订阅,这意味着我们需要更好的状态管理方式,于是就引入了...

    CNZPH 评论0 收藏0
  • Elasticsearch学习上手(一)

    摘要:是一个基于的开源搜索引擎。的目的是通过简单的来隐藏的复杂性,从而让全文搜索变得简单。它提供了许多合理的缺省值,并对初学者隐藏了复杂的搜索引擎理论。它开箱即用安装即可使用,只需很少的学习既可在生产环境中使用。 Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎。一开始公司里一位同事是直接采用Luncene进行开发的,整体开发下来,代码量大,比较复杂,我就...

    PumpkinDylan 评论0 收藏0
  • Elasticsearch学习上手(一)

    摘要:是一个基于的开源搜索引擎。的目的是通过简单的来隐藏的复杂性,从而让全文搜索变得简单。它提供了许多合理的缺省值,并对初学者隐藏了复杂的搜索引擎理论。它开箱即用安装即可使用,只需很少的学习既可在生产环境中使用。 Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎。一开始公司里一位同事是直接采用Luncene进行开发的,整体开发下来,代码量大,比较复杂,我就...

    amc 评论0 收藏0

发表评论

0条评论

Java3y

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<