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 ...
随机推荐
- NPOI 读取excel的时候，时间格式的处理
excel的时间格式是:CellType.Numeric 要判断时间还需要方法:DateUtil.IsCellDateFormatted(cell)的帮助: 示例代码如下: ICell cell = ...
- JAVA进阶21
1.Vector向量 如何选用ArrayList.LinkedList.Vector? ①需要线程安全时,用Vector ②不存在线程安全问题时,并且查找较多用ArrayList(一般使用它) ③不存 ...
- 分享一个VueCli 3.0的项目模板
个人搭建的Vue项目模板 默认自带 Vuex Less 封装内容如下 vue.config axios 封装 vue 配置环境文件 vue 自定义路径映射 (cli3.0取消了默认@ 映射src的 ...
- 【转】一文掌握 Linux 性能分析之网络篇
[转]一文掌握 Linux 性能分析之网络篇 比较宽泛地讲,网络方向的性能分析既包括主机测的网络配置查看.监控,又包括网络链路上的包转发时延.吞吐量.带宽等指标分析.包括但不限于以下分析工具: pin ...
- VS2013创建ASP.NET应用程序描述
你的 ASP.NET 应用程序 恭喜! 你已创建了一个项目 此应用程序包含: 显示“主页”.“关于”和“联系方式”之间的基本导航的示例页 使用 Bootstrap 进行主题定位 身份验证,如果选择此项 ...
- mac配置变量失败导致ls命令都失效
1.在命令行中输入 export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin 这样可以保证命令行命令暂时可以使用.命令执行完之后先不要关闭终端 ...
- Django-CSRF,AJAX,FORM
内容总览1.CSRF相关1>CSRF源码分析2>ajax的实现(ajax的实例(异步计算,参数测试,上传))3>ajax通过csrf的校验 2.FORM组件1>基本使用2> ...
- 详解MariaDB数据库的索引
1.什么是索引 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针. 更通俗的说,数据库索引好比是一本书前面的目录,在查找内容之前可以先在 ...
- Linux telnet安装
为什么需要telnet? telnet就是查看某个端口是否可访问.我们在搞开发的时候,经常要用的端口就是 8080.那么你可以启动服务器,用telnet 去查看这个端口是否可用. Linux cent ...
- NPM修改默认全局安装路径
有段时间没用npm了,昨天打算用vue-cli来新建个项目,yarn global add @vue/cli 之后,粗大事了.vue命令不可用,显示未安装.各种折腾,后来发现问题所在,今天写出来,一方 ...