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 ...
随机推荐
- Pollard-rho算法学习笔记
写在前面 目录 问题的提出 生日悖论 利用生日悖论来因数分解 Pollard-rho算法 例题完成进度 1/3 问题的提出 如何快速地找到一个自然数N的两个因数(除自己和1以外)? 首先想到的肯定是传 ...
- proxysql系列 ~ 运维相关
一 常用命令 //实时加载 load mysql servers to runtime; mysql_server load mysql users to runtime; mysql_u ...
- mac 终端里进入mysql和退出
先在偏好设置里启动mysql服务 获取超级权限 在终端输入代码 sudo su 输入完后获取超级权限 终端显示 sh-3.2# 输入本机密码(Apple ID密码) 接着通过绝对路径登陆 代码 /us ...
- 【转】Python多进程编程
[转]Python多进程编程 序. multiprocessingpython中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Pytho ...
- 看我如何粘贴别人代码--socketserver
源码执行流程 自己模仿一个(提取代码) 服务器类 import socket import threading import selectors class TCPServer: def __init ...
- windows 环境下切换 python2 与 pythone3 以及常用命令
windows 环境下切换运行时的 python2 与 pythone3 当需要 python2 时执行:py -2 当需要 python3 时执行:py -3 windows下通过cmd切换pyth ...
- ptmalloc内存分配释放
出处 分配: 1)获取分配区的锁,为了防止多个线程同时访问同一个分配区,在进行分配之前需要取得分配区域的锁.线程先查看线程私有实例中是否已经存在一个分配区,如果存在尝试对该分配区加锁,如果加锁成功,使 ...
- js 刷新父业面
window.opener.location.reload() 2个方法都是刷新父窗口,但是其中还是有奥妙的哦.window.opener.location.reload();这个方法在强迫父窗口的时 ...
- HDU-魔咒词典(字符串hash)
魔咒词典 TimeLimit: 8000/5000 MS (Java/Others) MemoryLimit: 32768/32768 K (Java/Others) 64-bit integer ...
- open file /var/mobile/Media/DCIM 相册中获取到的视频地址使用 报错 视频文件不存在
从相册中获取到的视频地址 例如 file:///var/mobile/Media/DCIM/100APPLE/IMG_9876.MOV 后面再使用的时候报错 视频文件不存在 那是因为在ios10. ...