效果地址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. rem,em,与px的比较用法

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

  2. linux 部署

    一.d2 安装之后的配置 centos系统安装后的基本配置: .常用软件安装: yum install -y bash-completion vim lrzsz wget expect net-too ...

  3. XML注入(XXE)

    XML所有元素都必须要有一个结束标志 大小写敏感 所有元素嵌套必须正确 所有的XML文档都必须要有一个根标志 XML包括XML声明,DTD文档类型定义(可选),文档元素 DTD即文档类型定义,用来为X ...

  4. creator rotationY的问题

    最近在做一个2D的小游戏,碰撞方面由于懒,就直接使用cocos自带的物理组件RigidBody了. 但是在父节点挂载RigidBody之后,会导致设置rotationY时失效,具体原因没有深查,估计是 ...

  5. JS实现购物商城商品放大

    img属于行内元素 <img src=''>gq</img> 效果 当放大图片时候,文字位置发生改变 文字出现在图片下方,因为图片有一个隐形的g线,这条线的位置和以前上学时候, ...

  6. Echart横坐标时间轴滑动

    主要针对于dataZoom的使用,代码如下: option = { title: { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip: { trigger: ...

  7. Asteroids 爆破彗星

    发售年份 1979 平台 街机 开发商 雅达利(Atari) 类型 射击 https://www.youtube.com/watch?v=WYSupJ5r2zo

  8. 安装netcat(-bash: netcat: command not found)

    安装netcat 在用swoole UDP服务器可以使用netcat -u 来连接测试时,报错-bash: netcat: command not found,是因为centos7未安装netcat. ...

  9. DevExpress中GridControl的重新绑定数据后如何刷新 (转)

    如果对girdcontrol的datasource新添加数据,重新刷新, gridControl1.DataSource = list; gridView1.RefreshData();

  10. Ignite(二): 架构及工具

    1.集群和部署 Ignite集群基于无共享架构,所有的集群节点都是平等的,独立的,整个集群不存在单点故障. 通过灵活的Discovery SPI组件,Ignite节点可以自动地发现对方,因此只要需要, ...