CSS3 box-shadow 男人女人卡通肖像

DIV元素的中心是一个1em（默认16px）的像素，然后使用box-shadow以这个中心点为参考位置构建的人物肖像。

cartoon

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1802
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* You can change these */
/* Colors */

body {
    font-size: 7px;
    background-color: #4ea077;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
}
.james {
    background: #242424;
    position: relative;
    left: -7em;
    height: 1em;
    width: 1em;
    box-shadow: -6em 0 0 #fac384, -5em 0 0 #fac384, -3em 0 0 #242424, -2em 0 0 #333, -1em 0 0 #242424, 1em 0 0 #c3c3c3, 2em 0 0 #242424, 3em 0 0 #333, 4em 0 0 #fac384, 5em 0 0 #fac384, -6em 1em 0 #fac384, -5em 1em 0 #fac384, -3em 1em 0 #333, -2em 1em 0 #333, -1em 1em 0 #333, 0em 1em 0 #333, 1em 1em 0 #333, 2em 1em 0 #333, 3em 1em 0 #333, 4em 1em 0 #fac384, -3em 2em 0 #333, -2em 2em 0 #333, -1em 2em 0 #333, 0em 2em 0 #333, 1em 2em 0 #333, 2em 2em 0 #333, 3em 2em 0 #333, -3em 3em 0 #333, -2em 3em 0 #333, 2em 3em 0 #333, 3em 3em 0 #333, -3em 4em 0 #333, -2em 4em 0 #333, 2em 4em 0 #333, 3em 4em 0 #333, -3em 5em 0 #333, -2em 5em 0 #333, 2em 5em 0 #333, 3em 5em 0 #333, -3em 6em 0 #333, -2em 6em 0 #333, 2em 6em 0 #333, 3em 6em 0 #333, -3em 7em 0 #333, -2em 7em 0 #333, 2em 7em 0 #333, 3em 7em 0 #333, -3em 8em 0 #333, -2em 8em 0 #333, 2em 8em 0 #333, 3em 8em 0 #333, -3em 9em 0 #333, -2em 9em 0 #333, 2em 9em 0 #333, 3em 9em 0 #333, -3em 10em 0 #333, -2em 10em 0 #333, 2em 10em 0 #333, 3em 10em 0 #333, -2em 11em 0 #000, -1em 11em 0 #000, 3em 11em 0 #000, 4em 11em 0 #000, -7em -1em 0 #fac384, -6em -1em 0 #fac384, -3em -1em 0 #2d71b5, -2em -1em 0 #2d71b5, -1em -1em 0 #2d71b5, 0em -1em 0 #2d71b5, 1em -1em 0 #2d71b5, 2em -1em 0 #2d71b5, 3em -1em 0 #2d71b5, 5em -1em 0 #fac384, -7em -2em 0 #fac384, -6em -2em 0 #fac384, -3em -2em 0 #2d71b5, -2em -2em 0 #2d71b5, -1em -2em 0 #2d71b5, 0em -2em 0 #2d71b5, 1em -2em 0 #2d71b5, 2em -2em 0 #2d71b5, 3em -2em 0 #2d71b5, 5em -2em 0 #fac384, -7em -3em 0 #fac384, -6em -3em 0 #fac384, -3em -3em 0 #2d71b5, -2em -3em 0 #2d71b5, -1em -3em 0 #2d71b5, 0em -3em 0 #2d71b5, 1em -3em 0 #2d71b5, 2em -3em 0 #2d71b5, 3em -3em 0 #2d71b5, 5em -3em 0 #fac384, -6em -4em 0 #2d71b5, -5em -4em 0 #2d71b5, -3em -4em 0 #2d71b5, -2em -4em 0 #2d71b5, -1em -4em 0 #2d71b5, 0em -4em 0 #2d71b5, 1em -4em 0 #2d71b5, 2em -4em 0 #2d71b5, 3em -4em 0 #2d71b5, 5em -4em 0 #2d71b5, -6em -5em 0 #2d71b5, -5em -5em 0 #2d71b5, -4em -5em 0 #2d71b5, -3em -5em 0 #2d71b5, -2em -5em 0 #2d71b5, -1em -5em 0 #2d71b5, 0em -5em 0 #2d71b5, 1em -5em 0 #2d71b5, 2em -5em 0 #2d71b5, 3em -5em 0 #2d71b5, 4em -5em 0 #2d71b5, -5em -6em 0 #2d71b5, -4em -6em 0 #2d71b5, -3em -6em 0 #2d71b5, -2em -6em 0 #2d71b5, -1em -6em 0 #2d71b5, 0em -6em 0 #2d71b5, 1em -6em 0 #2d71b5, 2em -6em 0 #2d71b5, 3em -6em 0 #2d71b5, 4em -6em 0 #2d71b5, -4em -7em 0 #2d71b5, -3em -7em 0 #2d71b5, -2em -7em 0 #2d71b5, -1em -7em 0 #2d71b5, 0em -7em 0 #2d71b5, 1em -7em 0 #2d71b5, 2em -7em 0 #2d71b5, 3em -7em 0 #2d71b5, -2em -8em 0 #2d71b5, -1em -8em 0 #fac384, 0em -8em 0 #fac384, 1em -8em 0 #fac384, -2em -9em 0 #fac384, -1em -9em 0 #fac384, 0em -9em 0 #fac384, 1em -9em 0 #fac384, 2em -9em 0 #fac384, 3em -9em 0 #fac384, -2em -10em 0 #fac384, -1em -10em 0 #fac384, 0em -10em 0 #fac384, 1em -10em 0 #fac384, 2em -10em 0 #fac384, -2em -11em 0 #fac384, -1em -11em 0 #fac384, 0em -11em 0 #fac384, 1em -11em 0 #fac384, 2em -11em 0 #fac384, 3em -11em 0 #fac384, -3em -12em 0 #fac384, -2em -12em 0 #fac384, -1em -12em 0 #fac384, 0em -12em 0 #fac384, 1em -12em 0 #fac384, 2em -12em 0 #fac384, 3em -12em 0 #fac384, 4em -12em 0 #fac384, -3em -13em 0 #fac384, -2em -13em 0 #2c1b12, -1em -13em 0 #fac384, 0em -13em 0 #fac384, 1em -13em 0 #fac384, 2em -13em 0 #fac384, 3em -13em 0 #fac384, -3em -14em 0 #2c1b12, -2em -14em 0 #2c1b12, -1em -14em 0 #fac384, 0em -14em 0 #fac384, 1em -14em 0 #060402, 2em -14em 0 #fac384, 3em -14em 0 #060402, -3em -15em 0 #2c1b12, -2em -15em 0 #2c1b12, -1em -15em 0 #fac384, 0em -15em 0 #060402, 1em -15em 0 #060402, 2em -15em 0 #fac384, 3em -15em 0 #060402, -3em -16em 0 #2c1b12, -2em -16em 0 #2c1b12, -1em -16em 0 #2c1b12, 0em -16em 0 #fac384, 1em -16em 0 #fac384, 2em -16em 0 #fac384, 3em -16em 0 #fac384, -3em -17em 0 #2c1b12, -2em -17em 0 #2c1b12, -1em -17em 0 #2c1b12, 0em -17em 0 #fac384, 1em -17em 0 #fac384, 2em -17em 0 #fac384, 3em -17em 0 #fac384, -3em -18em 0 #2c1b12, -2em -18em 0 #2c1b12, -1em -18em 0 #2c1b12, 0em -18em 0 #2c1b12, 1em -18em 0 #2c1b12, 2em -18em 0 #2c1b12, 3em -18em 0 #2c1b12, -2em -19em 0 #2c1b12, -1em -19em 0 #2c1b12, 0em -19em 0 #2c1b12, 1em -19em 0 #2c1b12, 2em -19em 0 #2c1b12;
}
.anna {
    background: #bfbfbf;
    height: 1em;
    width: 1em;
    position: relative;
    right: -7em;
    bottom: -3em;
    box-shadow: -3em 0 0 #bfbfbf, -2em 0 0 #bfbfbf, -1em 0 0 #bfbfbf, 1em 0 0 #bfbfbf, -2em 1em 0 #bfbfbf, -1em 1em 0 #bfbfbf, 0em 1em 0 #bfbfbf, 1em 1em 0 #bfbfbf, -2em 2em 0 #bfbfbf, -1em 2em 0 #bfbfbf, 0em 2em 0 #bfbfbf, 1em 2em 0 #bfbfbf, -2em 3em 0 #fbcd9b, 1em 3em 0 #fbcd9b, -3em 4em 0 #fbcd9b, 1em 4em 0 #fbcd9b, -3em 5em 0 #fbcd9b, 1em 5em 0 #fbcd9b, -3em 6em 0 #fbcd9b, 1em 6em 0 #fbcd9b, -3em 7em 0 #bfbfbf, -2em 7em 0 #bfbfbf, 1em 7em 0 #bfbfbf, 2em 7em 0 #bfbfbf, -3em -1em 0 #bfbfbf, -2em -1em 0 #bfbfbf, -1em -1em 0 #bfbfbf, 0em -1em 0 #bfbfbf, 1em -1em 0 #bfbfbf, 2em -1em 0 #bfbfbf, -3em -2em 0 #bfbfbf, -1em -2em 0 #bfbfbf, 0em -2em 0 #bfbfbf, 1em -2em 0 #bfbfbf, 3em -2em 0 #bfbfbf, -3em -3em 0 #bfbfbf, -1em -3em 0 #bfbfbf, 0em -3em 0 #bfbfbf, 1em -3em 0 #bfbfbf, 3em -3em 0 #fbcd9b, -3em -4em 0 #fbcd9b, -1em -4em 0 #bfbfbf, 0em -4em 0 #bfbfbf, 1em -4em 0 #bfbfbf, 2em -4em 0 #bfbfbf, -3em -5em 0 #fbcd9b, -1em -5em 0 #bfbfbf, 0em -5em 0 #bfbfbf, 1em -5em 0 #bfbfbf, 2em -5em 0 #bfbfbf, -2em -6em 0 #fbcd9b, -1em -6em 0 #fbcd9b, 0em -6em 0 #fbcd9b, 1em -6em 0 #fbcd9b, 2em -6em 0 #fbcd9b, -2em -7em 0 #c2763d, -1em -7em 0 #c2763d, 0em -7em 0 #fbcd9b, 1em -7em 0 #fbcd9b, -3em -8em 0 #c2763d, -2em -8em 0 #c2763d, -1em -8em 0 #c2763d, 0em -8em 0 #fbcd9b, 1em -8em 0 #fbcd9b, 2em -8em 0 #c2763d, 3em -8em 0 #c2763d, -4em -9em 0 #c2763d, -3em -9em 0 #c2763d, -2em -9em 0 #c2763d, -1em -9em 0 #c2763d, 0em -9em 0 #fbcd9b, 1em -9em 0 #fbcd9b, 2em -9em 0 #fbcd9b, 3em -9em 0 #fbcd9b, 4em -9em 0 #c2763d, -4em -10em 0 #c2763d, -3em -10em 0 #c2763d, -2em -10em 0 #c3c3c3, -1em -10em 0 #c2763d, 0em -10em 0 #fbcd9b, 1em -10em 0 #fbcd9b, 2em -10em 0 #ff6197, 3em -10em 0 #ff6197, 4em -10em 0 #c2763d, -4em -11em 0 #c2763d, -3em -11em 0 #c2763d, -2em -11em 0 #c3c3c3, -1em -11em 0 #c2763d, 0em -11em 0 #fbcd9b, 1em -11em 0 #fbcd9b, 2em -11em 0 #fbcd9b, 3em -11em 0 #fbcd9b, 4em -11em 0 #fbcd9b, -4em -12em 0 #c2763d, -3em -12em 0 #c2763d, -2em -12em 0 #c3c3c3, -1em -12em 0 #c2763d, 0em -12em 0 #fbcd9b, 1em -12em 0 #fbcd9b, 2em -12em 0 #fbcd9b, 3em -12em 0 #fbcd9b, 4em -12em 0 #fbcd9b, 5em -12em 0 #fbcd9b, -4em -13em 0 #c2763d, -3em -13em 0 #c2763d, -2em -13em 0 #c2763d, -1em -13em 0 #fbcd9b, 0em -13em 0 #fbcd9b, 1em -13em 0 #fbcd9b, 2em -13em 0 #070, 3em -13em 0 #fbcd9b, 4em -13em 0 #070, -5em -14em 0 #c2763d, -3em -14em 0 #c2763d, -2em -14em 0 #c2763d, -1em -14em 0 #c2763d, 0em -14em 0 #fbcd9b, 1em -14em 0 #d69068, 2em -14em 0 #d69068, 3em -14em 0 #fbcd9b, 4em -14em 0 #d69068, 5em -14em 0 #c2763d, -3em -15em 0 #c2763d, -2em -15em 0 #c2763d, -1em -15em 0 #c2763d, 0em -15em 0 #fbcd9b, 1em -15em 0 #fbcd9b, 2em -15em 0 #fbcd9b, 3em -15em 0 #fbcd9b, 4em -15em 0 #fbcd9b, 5em -15em 0 #c2763d, -3em -16em 0 #c2763d, -2em -16em 0 #c2763d, -1em -16em 0 #c2763d, 0em -16em 0 #c2763d, 1em -16em 0 #c2763d, 2em -16em 0 #fbcd9b, 3em -16em 0 #fbcd9b, 4em -16em 0 #c2763d, 5em -16em 0 #c2763d, -2em -17em 0 #c2763d, -1em -17em 0 #c2763d, 0em -17em 0 #c2763d, 1em -17em 0 #c2763d, 2em -17em 0 #c2763d, 3em -17em 0 #c2763d, 4em -17em 0 #c2763d, -2em -18em 0 #c2763d, -1em -18em 0 #c2763d, 0em -18em 0 #c2763d, 1em -18em 0 #c2763d, 2em -18em 0 #c2763d, 3em -18em 0 #c2763d, 4em -18em 0 #c2763d, -1em -19em 0 #c2763d, 0em -19em 0 #c2763d, 2em -19em 0 #c2763d, 3em -19em 0 #c2763d;
}

HTML

DIV元素的中心是一个1em（默认16px）的像素，然后使用box-shadow以这个中心点为参考位置构建的人物肖像。

cartoon

编辑器支持Emmet

快捷键

DIV元素的中心是一个1em（默认16px）的像素，然后使用box-shadow以这个中心点为参考位置构建的人物肖像。

cartoon

HTML5/CSS3 哆啦A梦 | 机器猫卡通肖像

CSS3 迪士尼米老鼠卡通肖像

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：