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 ...
随机推荐
- SpringMVC+Apache Shiro+JPA（hibernate）案例教学（二）基于SpringMVC+Shiro的用户登录权限验证
序: 在上一篇中,咱们已经对于项目已经做了基本的配置,这一篇文章开始学习Shiro如何对登录进行验证. 教学: 一.Shiro配置的简要说明. 有心人可能注意到了,在上一章的applicationCo ...
- 97w网站邀请码
我是一个老粉丝了. 如果想要97w网站邀请码可以留下联系方式,给我发过去哦. 最好是邮箱. http://www.97w.net/tag.html
- Python：python抓取豆瓣电影top250
一直对爬虫感兴趣,学了python后正好看到某篇关于爬取的文章,就心血来潮实战一把吧. 实现目标:抓取豆瓣电影top250,并输出到文件中 1.找到对应的url:https://movie.douba ...
- CoordinatorLayout 嵌套 AppBarLayout RecyclerView ，通过代码控制，使得CoordinatorLayout 自动滑动到tab置顶的位置
有两个方式可以实现 一:调用AppBarLayout,设置间距 val behavior = (appbar_layout.getLayoutParams() as CoordinatorLayout ...
- spring boot集成netty-服务端和客户端demo
项目源码:https://github.com/zhzhair/spring-boot-netty.git 项目启动说明:服务端--spring-boot-netty-server,客户端--spri ...
- 使用scrapy爬虫,爬取今日头条首页推荐新闻（scrapy+selenium+PhantomJS）
爬取今日头条https://www.toutiao.com/首页推荐的新闻,打开网址得到如下界面 查看源代码你会发现 全是js代码,说明今日头条的内容是通过js动态生成的. 用火狐浏览器F12查看得知 ...
- 关于VC预定义常量_WIN32，WIN32，_WIN64等预定义宏的介绍（整理、转载）
参考帖子: (1)MSDN上专门讲预定义宏:https://msdn.microsoft.com/en-us/library/b0084kay(v=vs.80).aspx (2)VS中属性页的配置介绍 ...
- 让你的Spring Boot应用快速运行在Docker上面
前置条件: 1. 服务器(我这边是CentOS7)上已经安装了Docker(安装步骤很简单,可以参考我上一篇博客) 2.服务器上已经安装了Java和Maven 在满足以上条件后,我们就可以开始了: 1 ...
- 小程序如何传数组数据到vs后台中
首先小程序要跟vs运行的状态打通,首先要修改配置,也就是说调试的时候,小程序一使用Post请求后台的方法时就能让vs进入调试状态. 1.修改vs中的配置,注意这个.vs文件,如图: 找到这个文件 然后 ...
- 笔记，ajax，事件绑定，序列化
1. Python序列化 字符串 = json.dumps(对象) 对象->字符串 对象 = json.loads(字符串) 字符串->对象 JavaScript: 字符串 = JSON. ...