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 ...
随机推荐
- list不是模板
vector和list在命名空间std里,还需要添加声明 using namespace std;
- java 注意事项---避免踩坑
1.......对象参数接收不能大写
- git本机服务器配置(三)：Gitblit的安装
1. 下载 http://www.gitblit.com/ 2. 解压下载文件 3. 配置信息 3.1 需要提前配置好java jdk环境 3.2 打开data目录下的defaults.propert ...
- Maven - 镜像<mirror>
使用镜像如果你的地理位置附近有一个速度更快的central镜像,或者你想覆盖central仓库配置,或者你想为所有POM使用唯一的一个远程仓库(这个远程仓库代理的所有必要的其它仓库),你可以使用set ...
- SpringBoot文件的上传与下载
⒈文件实体类 package cn.coreqi.security.entities; public class FileInfo { private String path; public File ...
- FATAL ERROR: please install the following Perl modules before executing
运行安装mysql 报错 [root@localhost mysql-mult]# ./scripts/mysql_install_db --defaults-file=conf/3306my.cn ...
- 两个MMCM共享时钟输入时的严重警告和错误
情景描述: 芯片:zynq7020 问题: 设计从FPGA的U19引脚上的开发板板接收时钟输入125M,并将其送到两个MMCM.使用软件:vivado2015.4在Vivado中打开合成设计后,我得到 ...
- java学习笔记05-运算符
算数运算符 +:相加 -:相减 *:相乘 /:相除 %:取余 ++:自增 --:自减 public static void main(String[] args) { int i = 10; int ...
- 【easy】532. K-diff Pairs in an Array
这道题给了我们一个含有重复数字的无序数组,还有一个整数k,让我们找出有多少对不重复的数对(i, j)使得i和j的差刚好为k.由于k有可能为0,而只有含有至少两个相同的数字才能形成数对,那么就是说我们需 ...
- USACO15DEC最大流MaxFlow
传送门 这是个假的最大流,其实是一个用树剖+线段树就能解决的事情 题目中的道路会对路径上的造成压力,最后询问最大的压力 其实就等价于对每条路径上的点加上 1 的权值,并且最后询问整个树中的最大值 然后 ...