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

随机推荐

eclipse添加jar包进jar源码debug调试
1.点击调试配置 2.选中源码 3.点击添加 4.点击java路径变量 5.点击环境变量配置 6.输入名称及jar包复制限定名
word20161231
1. measurement 英[ˈmeʒəmənt]美[ˈmeʒərmənt]n. 量度; 份量,尺寸; 测量法; (量得的) 尺寸;[例句]We took lots of measurements ...
实验吧 deeeeeeaaaaaadbeeeeeeeeeef-20
题目描述: 图片是正确的吗? 解题思路: 这道题很有意思,常规的隐写思路没有线索,结果问题出现在照片的分辨率上,tEXtSource iPhone 5的后置摄像头是3264×2448的分辨率,前置摄像 ...
按Ctrl+Enter发送的实现
按Ctrl+Enter发送 1, 监听textarea的onkeydown事件 <textarea tabindex="1" class="ie6ta" ...
mina statemachine解读（二）
这里主要讲下对外接口暴露的处理. // 创建对外接口对象 TaskWork taskWork = new StateMachineProxyBuilder().setStateContextLooku ...
YOLO v3
yolo为you only look once. 是一个全卷积神经网络(FCN),它有75层卷积层,包含跳跃式传递和降采样,没有池化层,当stide=2时用做降采样. yolo的输出是一个特征映射(f ...
python3排序 sorted(key=lambda)
使用python对列表(list)进行排序,说简单也简单,说复杂也复杂,我一开始学的时候也搞不懂在说什么,只能搜索一些英文文章看看讲解,现在积累了一些经验,写在这里跟大家分享,我们通过例子来详细解释一 ...
find your present (2) hdoj 2095
/* author:谦智 find your present (2) hdoj 2095 法一:用暴力法二:用map 法三: 符号是^. 异或是个位运算符号,具体是怎么操作的请百度,这里有个特性使得 ...
利用Owin解决CORS报错问题
我的项目是vue + ASP.NET .在 Vue调试时,由于vue开启的调试用的服务器端口号和后台.NET程序的端口号是不同的,发送Ajax请求时,就会报错.这里就不提报错的原因了,网上有很多, ...
一丶Http协议
一 HTTP概述 HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则. HTTP就是一个通信规则,通信规则 ...

box-shadow 画叮当猫

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

随机推荐

热门专题