效果地址https://scrimba.com/c/cQpyKbUp

效果图

HTML code

<div class="loader"></div>

CSS code

html, body {
margin:;
padding:;
}
/* 设置body子元素垂直居中 对阴影无效,哈哈 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: gray;
}
/* 设置.loader样式 */
.loader {
/* 调整font-size大小就直接调整整个loader大小 */
font-size: 30px;
width: 1em;
height: 1em;
background-color: blue;
/* http://www.w3school.com.cn/cssref/pr_box-shadow.asp */
box-shadow:
/* 下方的阴影 *、
/*水平位置 垂直位置 尺寸 颜色 */
0 0 0.2em white,
0 2em, 2em 2em , 4em 2em, 6em 2em,
0 4em red, 2em 4em green, 4em 4em blue, 6em 4em white, 8em 4em black,
/* 上方的阴影 */
-2em -2em 1em,-4em -2em 0.1em,/* 颜色默认black; */
-4em -4em 0.2em 0.5em white ; /* x, y,模糊距离,阴影尺寸,颜色 */
}

63.1拓展之box-shadow属性的更多相关文章

  1. Layer的shadow属性

    Layer的shadow属性 Layer中的阴影都是可以做动画处理的. - (void)viewDidLoad { [super viewDidLoad]; CALayer *layer = [CAL ...

  2. C# 拓展ComboBox设置线条属性(转)

    C# 拓展ComboBox设置线条属性目前由于项目需要,要实现线条属性设置的功能,就如Visio中点击线端时,可以弹出一个窗口设置线条的各种属性. 其中线条属性选择时,是在ComboBox控件中,显示 ...

  3. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  4. css display:box 新属性

    一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...

  5. 63.1拓展之纯 CSS 创作一个摇摇晃晃的 loader

    效果地址:https://scrimba.com/c/cqKv4VCR HTML code: <div class="loader"> <span>Load ...

  6. 55.1拓展之边框border-width属性。

    效果地址:https://scrimba.com/c/cQpDKkSN HTML code: <div class="border1 borders"></div ...

  7. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  8. Sublime Text自定制代码片段(Code Snippets)

    在编写代码的整个过程中,开发人员经常会一次又一次的改写或者重用相同的代码段,消除这种重复过程的方法之一是把我们经常用到的代码保存成代码片段(snippets),这使得我们可以方便的检索和使用它们. 为 ...

  9. 关于box-shadow属性的一点心得

    一般我用到box-shadow都是用于诸如按钮,文本块,某些图标,css类似为: box-shadow: 1px 1px 5px rgba(0, 0, 0, .8); 这样,样式看上去会更加柔和,或者 ...

随机推荐

  1. MHA-Atlas-MySQL高可用集群2

    MHA脚本管理方式 (1)获取管理脚本master_ip_failover 提示:yum安装的manager是没有这个脚本的. 我们需要从manager的源码包里复制一个.   [root@mysql ...

  2. hadoop MapReduce

    简单介绍 官方给出的介绍是hadoop MR是一个用于轻松编写以一种可靠的.容错的方式在商业化硬件上的大型集群上并行处理大量数据的应用程序的软件框架. MR任务通常会先把输入的数据集切分成独立的块(可 ...

  3. 项目工程中的WebRoot与WebContent有什么区别?

    [1] 在MyEclipse中创建web项目后,web程序的根目录文件夹是WebRoot,而创建dynam web project时候,web程序的根 目录文件夹是WebContent,他们之间没有本 ...

  4. BBS

    __init__.py # 这个告诉程序用的是什么数据库import pymysql pymysql.install_as_MySQLdb() settings.py import os # Buil ...

  5. MySQL数据库 命令行 学习笔记(一)

    常用关系型数据库1 MySQL:开源免费的适用于中小型企业的免费数据库2 oracle:甲骨文公司,商业软件,收费,适用于大型电商网站3 db2:IBM公司,银行系统主要采用db24 SqlSever ...

  6. 关于pycharm中缩进、粘贴复制等文本编辑功能部分失效的解决办法

    有可能是同时安装了vim,冲突导致: 在seetings中点击Plugins,搜索vim卸载后功能恢复

  7. Go Example--json

    package main import ( "encoding/json" "fmt" "os" ) type Response1 stru ...

  8. Java 调用 Shell 命令

    近日项目中有这样一个需求:系统中的外币资金调度完成以后,要将调度信息生成一个Txt文件,然后将这个Txt文件发送到另外一个系统(Kondor)中.生成文件自然使用OutputStreamWirter了 ...

  9. click python cli 开发包

    python click 包是一个方便的cli 开发包,我们可以用来开发强大的cli 应用 使用venv 进行环境准备,示例代码来自官方 venv 环境准备 python3 -m venv demoa ...

  10. el-popover 的显示或隐藏,要在拿到真实dom之后再做控制

    el-popover 的显示或隐藏,要在拿到真实dom之后再做控制