box-shadow 画叮当猫

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色。请参阅 CSS 颜色值
inset	可选。将外部阴影 (outset) 改为内部阴影

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .container{

            position: relative;

            width: 36px;

            height: 36px;

            border-radius: 50%;

            margin: 300px auto;

            background-color: #C63D01;

            box-shadow: 0px 0px 0 1px #000,  /* x y 扩展 第三个参数是扩展 红鼻子边框  */

                42px 25px 0 -17px #000,            /*  胡须  */

                44px 25px 0 -17px #000,

                46px 25px 0 -17px #000,

                48px 25px 0 -17px #000,

                50px 25px 0 -17px #000,

                52px 25px 0 -17px #000,

                54px 25px 0 -17px #000,

                56px 25px 0 -17px #000,

                58px 25px 0 -17px #000,

                60px 25px 0 -17px #000,

                62px 25px 0 -17px #000,

                64px 25px 0 -17px #000,

                66px 25px 0 -17px #000,

                68px 25px 0 -17px #000,

                70px 25px 0 -17px #000,

                72px 25px 0 -17px #000,

                74px 25px 0 -17px #000,

                76px 25px 0 -17px #000,

                78px 25px 0 -17px #000,

                80px 25px 0 -17px #000,

                82px 25px 0 -17px #000,

                84px 25px 0 -17px #000,

                42px 47px 0 -17px #000,

                44px 47px 0 -17px #000,

                46px 47px 0 -17px #000,

                48px 47px 0 -17px #000,

                50px 47px 0 -17px #000,

                52px 47px 0 -17px #000,

                54px 47px 0 -17px #000,

                56px 47px 0 -17px #000,

                58px 47px 0 -17px #000,

                60px 47px 0 -17px #000,

                62px 47px 0 -17px #000,

                64px 47px 0 -17px #000,

                66px 47px 0 -17px #000,

                68px 47px 0 -17px #000,

                70px 47px 0 -17px #000,

                72px 47px 0 -17px #000,

                74px 47px 0 -17px #000,

                76px 47px 0 -17px #000,

                78px 47px 0 -17px #000,

                80px 47px 0 -17px #000,

                82px 47px 0 -17px #000,

                84px 47px 0 -17px #000,

                44px 70px 0 -17px #000,

                46px 70px 0 -17px #000,

                42px 70px 0 -17px #000,

                48px 70px 0 -17px #000,

                50px 70px 0 -17px #000,

                52px 70px 0 -17px #000,

                54px 70px 0 -17px #000,

                56px 70px 0 -17px #000,

                58px 70px 0 -17px #000,

                60px 70px 0 -17px #000,

                62px 70px 0 -17px #000,

                64px 70px 0 -17px #000,

                66px 70px 0 -17px #000,

                68px 70px 0 -17px #000,

                70px 70px 0 -17px #000,

                72px 70px 0 -17px #000,

                74px 70px 0 -17px #000,

                76px 70px 0 -17px #000,

                78px 70px 0 -17px #000,

                80px 70px 0 -17px #000,

                82px 70px 0 -17px #000,

                84px 70px 0 -17px #000,

                -42px 25px 0 -17px #000,

                -44px 25px 0 -17px #000,

                -46px 25px 0 -17px #000,

                -48px 25px 0 -17px #000,

                -50px 25px 0 -17px #000,

                -52px 25px 0 -17px #000,

                -54px 25px 0 -17px #000,

                -56px 25px 0 -17px #000,

                -58px 25px 0 -17px #000,

                -60px 25px 0 -17px #000,

                -62px 25px 0 -17px #000,

                -64px 25px 0 -17px #000,

                -66px 25px 0 -17px #000,

                -68px 25px 0 -17px #000,

                -70px 25px 0 -17px #000,

                -72px 25px 0 -17px #000,

                -74px 25px 0 -17px #000,

                -76px 25px 0 -17px #000,

                -78px 25px 0 -17px #000,

                -80px 25px 0 -17px #000,

                -82px 25px 0 -17px #000,

                -84px 25px 0 -17px #000,

                -42px 47px 0 -17px #000,

                -44px 47px 0 -17px #000,

                -46px 47px 0 -17px #000,

                -48px 47px 0 -17px #000,

                -50px 47px 0 -17px #000,

                -52px 47px 0 -17px #000,

                -54px 47px 0 -17px #000,

                -56px 47px 0 -17px #000,

                -58px 47px 0 -17px #000,

                -60px 47px 0 -17px #000,

                -62px 47px 0 -17px #000,

                -64px 47px 0 -17px #000,

                -66px 47px 0 -17px #000,

                -68px 47px 0 -17px #000,

                -70px 47px 0 -17px #000,

                -72px 47px 0 -17px #000,

                -74px 47px 0 -17px #000,

                -76px 47px 0 -17px #000,

                -78px 47px 0 -17px #000,

                -80px 47px 0 -17px #000,

                -82px 47px 0 -17px #000,

                -84px 47px 0 -17px #000,

                -44px 70px 0 -17px #000,

                -46px 70px 0 -17px #000,

                -42px 70px 0 -17px #000,

                -48px 70px 0 -17px #000,

                -50px 70px 0 -17px #000,

                -52px 70px 0 -17px #000,

                -54px 70px 0 -17px #000,

                -56px 70px 0 -17px #000,

                -58px 70px 0 -17px #000,

                -60px 70px 0 -17px #000,

                -62px 70px 0 -17px #000,

                -64px 70px 0 -17px #000,

                -66px 70px 0 -17px #000,

                -68px 70px 0 -17px #000,

                -70px 70px 0 -17px #000,

                -72px 70px 0 -17px #000,

                -74px 70px 0 -17px #000,

                -76px 70px 0 -17px #000,

                -78px 70px 0 -17px #000,

                -80px 70px 0 -17px #000,

                -82px 70px 0 -17px #000,

                -84px 70px 0 -17px #000,

                -20px -26px 0 -10px #333333,  /*  眼珠子  */

                -34px -40px 0 15px #fff,  /*  眼白  */

                -34px -40px 0 16px,   /*  眼框  */

                20px -26px 0 -10px #333333,

                34px -40px 0 15px #fff,

                34px -40px 0 16px,

                0px 55px 0 75px #fff,   /*  大脸  */

                0px 55px 0 76px #000,

                0 22px 0 120px #08BDEB,  /*  大脑袋  */

                0 22px 0 121px #000;

        }

        /*叮当猫的竖线鼻子*/

        .container::before{

            content: '';

            position: absolute;

            bottom: -81px;

            left: 17px;

            height: 80px;

            width: 2px;

            background-color: #000;

        }

        /*叮当猫的嘴巴*/

        .container::after{

            content: '';

            position: absolute;

            bottom: -83px;

            left: -44px;

            width: 125px;

            height: 70px;

            border-bottom-right-radius: 28px;

            border-bottom: solid 2px black;

            border-bottom-left-radius: 28px;

        }

    </style>

</head>

<body>

    <div class="container">

    </div>

</body>

</html>

box-shadow 画叮当猫的更多相关文章

如何设置box shadow的透明度
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...
分享div、text、Box Shadow(阴影)演示及代码的页面
附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html
webAssmebly实现js数组排序使用custom elements和Shadow DOM自定义组件
直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...
有趣的 CSS 像素艺术
原文地址:https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4 译者:nzbin 友情提示:由于国内网络的原因,Cod ...
CSS3属性border-radius绘制多种多样的图形
border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...
CSS3必须要知道的10个顶级命令
1.边框圆角(Border Radiuas) 这个是我们在平常很常用的吧,以前我在用div圆角的时候,特别特别的痛苦,不管是用CSS来画圆角,还是用图片来画圆角都不那么容易,但是现在好了,在CSS3中 ...
Css3_必备10个东西
1.边框圆角(Border Radiuas) 这个是我们在平常很常用的吧,以前我在用div圆角的时候,特别特别的痛苦,不管是用CSS来画圆角,还是用图片来画圆角都不那么容易,但是现在好了,在CSS3中 ...
CSS3 必须要知道的10 个顶级命令
来源:http://www.cnblogs.com/damonlan/archive/2012/04/23/2465569.html 作者:浪迹天涯 1.边框圆角(Border Radiuas) 这个 ...
来看看css3中的box-shadow
不谈IE,只谈谈box-shadow的具体使用方法语法: E {box-shadow: <length> <length> <length>?<length ...

随机推荐

REM方案总结
flexible.js方案 1.设置根元素字体大小为屏幕宽度的十分之一. 2.即根元素字体大小与屏幕宽度的比例为:1/10. jQuery.weui的rem设计方案 1.以屏幕宽度375px为基础,根 ...
如何在submit上运行php文件
一..把php加入到环境变量二.在sublmie中新建编译系统三.添加一下代码,修改成php当前的目录地址,保存在默认的路径下,命名为php.sublime-build { "cmd&q ...
使用 eclipse 的常用操作
1.创建项目 https://blog.csdn.net/tsundere_ning/article/details/79587060 2. 常用代码块创建编辑使得eclipse 相应, 点击右上角 ...
Django之Orm的各种操作
1.一般操作 ***必知必会13条*** <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 models.Cu ...
《剑指offer》和为S的两个数字
本题来自<剑指offer> 反转链表题目: 思路: C++ Code: Python Code: 总结:
一场由like引发的事故
故事背景: 有一张用户级表,数据量在千万级别,而运营人员要查看这张表,其中有一项查询条件为根据“错误类型”(单值)查出所有包含这个类型的数据,而这个数据类型在数据库存放的方式类似于 “1,2,3,4, ...
mysql 与 oracle 的连表update
mysql: update 表A a,表B b set a.xx=b.xx where a.id=b.id; oracle update 表A set a.xx=(select b.xx from 表 ...
Docker动态给容器Container暴露端口
查看Container的IP地址 docker inspect <container name or id>| grep IPAddress 查看Container的映射的端口 docke ...
scrapy爬取数据保存csv、mysql、mongodb、json
目录前言 Items Pipelines 前言用Scrapy进行数据的保存进行一个常用的方法进行解析 Items item 是我们保存数据的容器,其类似于 python 中的字典.使用 item ...
pwn学习（2）
0x00 序之前学了蒸米大佬的ropx86,本次学习 ropx64 0x01 Leak Memory & Dynelf 蒸米大佬使用pwntools的Dynelf模块来获取函数地址, ...

box-shadow 画叮当猫

box-shadow 画叮当猫的更多相关文章

随机推荐

热门专题