效果地址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. Python 虚拟环境[virtualenv/virtualenvwrapper]设置

      virtualenv virtualenv 是一个可以在同一计算机中隔离多个python版本的工具.有时,两个不同的项目可能需要不同版本的python,如 python2.6.6 / python ...

  2. 使用find命令查找文件

    find命令用法 语法: find (选项) (参数) 常用选项: -exec<执行命令>: 假设find指令的回传值为True,就执行该指令; -ls: 假设find指令的回传值为Tru ...

  3. application————web

    application 作用域: 只要web服务器不关闭就一直存在 统计页面的统计次数 一个用户 多次刷新也统计 多个用户访问 思路: 需要一个变量 count 记录index.jsp访问次数 方法 ...

  4. Pagedown learning notes

    Pagedown Links Google wiki page Download Markdown.Converter.js var converter = new Markdown.Converte ...

  5. pip install torch on windows, and the 'from torch._C import * ImportError: DLL load failed:' solution

    通过pip安装PyTorch 0.4.0成功(cpu, not gpu; python3.5; pip): pip3 install http://download.pytorch.org/whl/c ...

  6. 序列化、time、random、hashlib、sys模块

    •很多常用和内置模块,我们只需要掌握他们的用法而暂时不用考虑内部是如何实现的,这些模块大大提升了开发效率 ! 1.json模块与pickle模块 •json 如果你有这样的困扰,当希望把一种数据存到硬 ...

  7. 使用python读取MS-SQL数据库

    使用python读取MS-SQL中的数据,这里使用到模板pymssql. 因为不是python自带的模板,所以首先需要使用pip安装,对应命令:pip install pymssql 建立main.p ...

  8. Vue.js 父子组件之间通信的方式

    Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...

  9. 视频外同步信号研究---fvh

    视频外同步信号研究---fvh 一个时钟周期有两个edge,分别称为:(1)Leading edge=前一个边沿=第一个边沿,对于开始电压是1,那么就是1变成0的时候:对于开始电压是0,那么就是0变成 ...

  10. CAST()函数可以进行数据类型的转换。

    CAST()函数可以进行数据类型的转换. CAST()函数的参数有两部分,源值和目标数据类型,中间用AS关键字分隔. 以下例子均通过本人测试. 一.转换列或值 语法:cast( 列名/值 as 数据类 ...