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 ...

随机推荐

关于HashSet集合add元素
HashSet集合add元素底层实现使用的是HashMap. 简单记忆:无论HashMap put元素还是HashSet add元素,都先调用hashCode()方法,若hashCode方法返回值不同 ...
redis集群篇
redis集群的搭建 1.为什么要搭建集群(解决单点问题) 通过对redis的简单了解,我们知道redis已经有两种持久化方案rdb和aof.在redis出现宕机后,可能会出现部分的数据损失,但是数据 ...
获取spring的IOC核心容器，并根据id获取对象
public class Client { /** * 获取spring的IOC核心容器,并根据id获取对象 * ApplicationContext的三个常用实现类 * classPathXmlAp ...
修改elementui默认样式
转发连接:https://blog.csdn.net/weixin_41557291/article/details/80606525 在需要更改的组件里新增一个style标签[重点:不要加scope ...
L1-Day10
1.你需要的是更多的练习.[我的翻译]That you need is more practice.[标准答案]What you need is more practice[对比分析]主语从句用Tha ...
python2 线程基础
1,感谢菜鸟教程, 线程基础:导入,创建函数,创建线和运行 import thread import time # 为线程定义一个函数 def print_time(threadName, delay ...
2018-2019-2 20165234 《网络对抗技术》 Exp2 后门原理与实践
实验二后门原理与实践实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启动 (3)使用MSF meterpreter(或其 ...
结合jira搭建自动化测试平台
mysql 语句查看 python manage.py sqlmigrate your_app_name 0001 代码如下 #coding=utf8 #https://jira.readthedoc ...
JAVA 数组作为方法返回值—返回地址
package Code411;/*一个方法可以有0,1,多个参数,但只能有0和1个返回值希望一个方法产生多个结果数据进行返回数组作为方法的参数,传递进去的是数组的地址值. */public cl ...
非root用户加入docker用户组省去sudo
服务器环境:centos7.6.1810,Docker version 18.09.3 1.使用有sudo权限的帐号登录到服务器系统,如:test用户 2.新建用户组docker之前,查看用户组中有没 ...

box-shadow 画叮当猫

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

随机推荐

热门专题