标签：
接着之前的[css]我要用css画幅画(三)， 今天，我画了两朵云，并给小明介绍了个朋友：静静。
github：https://github.com/bee0060/Css-Paint ， 完整代码在pages/sun-house-4.html和相关的css中可以找到
demo： http://bee0060.github.io/Css-Paint/pages/sun-house-4.html
完整html如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css Paint</title> 6 <link rel="stylesheet" type="text/css" href="../css/sun.css" /> 7 <link rel="stylesheet" type="text/css" href="../css/house.css" /> 8 <link rel="stylesheet" type="text/css" href="../css/human.css" /> 9 <link rel="stylesheet" type="text/css" href="../css/cloud.css" /> 10 </head> 11 <body> 12 <div class="sun"> 13 <div class="sun-body"></div> 14 <div class="sun-shine-light sun-shine-light1"></div> 15 <div class="sun-shine-light sun-shine-light2"></div> 16 <div class="sun-shine-light sun-shine-light3"></div> 17 <div class="sun-shine-light sun-shine-light4"></div> 18 <div class="sun-shine-light sun-shine-light5"></div> 19 </div> 20 21 <div class="house-width house"> 22 <div class="house-width house-roof house-roof-left"></div> 23 <div class="house-width house-roof house-roof-right"></div> 24 <div class="house-width house-wall"> 25 26 <div class="house-wall-door"> 27 28 <div class="house-wall-door-handle"></div> 29 </div> 30 </div> 31 </div> 32 33 <div class="human human-pos-1"> 34 <p class="lines">大家好，我叫小明</p> 35 <div class="human-head-normal"></div> 36 <div class="human-body-normal"></div> 37 <div class="human-arms-normal"></div> 38 <div class="human-legs-normal"></div> 39 </div> 40 41 <div class="human human-pos-2"> 42 <p class="lines">大家好，我叫静静</p> 43 <div class="human-head-normal"></div> 44 <div class="human-body-normal"></div> 45 <div class="human-arms-normal"></div> 46 <div class="human-legs-1"></div> 47 </div> 48 49 <div class="cloud cloud-pos cloud-pos-1"> 50 <div class="cloud-pos cloud-border cloud-bg cloud-top"></div> 51 <div class="cloud-pos cloud-border cloud-bg cloud-left"></div> 52 <div class="cloud-pos cloud-border cloud-bg cloud-right"></div> 53 <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div> 54 </div> 55 <div class="cloud cloud-pos cloud-pos-2"> 56 <div class="cloud-pos cloud-border cloud-bg cloud-top"></div> 57 <div class="cloud-pos cloud-border cloud-bg cloud-left"></div> 58 <div class="cloud-pos cloud-border cloud-bg cloud-right"></div> 59 <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div> 60 </div> 61 62 63 </body> 64 </html>
本次对human.css做了一些改动，主要增加了如下内容：
1 .human-pos-1 { 2 left: 250px; 3 bottom: 25px; 4 } 5 6 .human-pos-2 { 7 left: 40px; 8 bottom: 60px; 9 } 10 11 .human-legs-1 { 12 border: 3px solid #000; 13 border-bottom: none; 14 border-right: none; 15 height:50px; 16 left: 55px; 17 position: absolute; 18 top: 120px; 19 width: 50px; 20 21 -webkit-transform: rotate(-2deg); 22 -webkit-transform-origin: 1px 1px; 23 }
云的css如下：
1 .cloud{ 2 height: 150px; 3 width: 250px; 4 } 5 6 .cloud-pos { 7 position: absolute; 8 } 9 10 .cloud-pos-1 { 11 left: 35%; 12 top: 25px; 13 } 14 15 .cloud-pos-2 { 16 left: 60%; 17 top: 25px; 18 } 19 20 .cloud-bg { 21 background-color: skyBlue; 22 } 23 24 .cloud-border { 25 border: 2px solid #000; 26 } 27 28 .cloud-top { 29 border-radius: 100%; 30 border-width: 0px; 31 height: 100px; 32 left: 50%; 33 margin-left:-75px; 34 width: 150px; 35 } 36 37 .cloud-left { 38 border-radius: 100%; 39 border-width: 0px; 40 height: 100px; 41 margin-top: -50px; 42 top: 60%; 43 width: 100px; 44 } 45 46 .cloud-right { 47 border-radius: 100%; 48 border-width: 0px; 49 height: 100px; 50 margin-top: -50px; 51 right:0; 52 top: 60%; 53 width: 100px; 54 } 55 .cloud-bottom { 56 border-radius: 100%; 57 border-width: 0px; 58 height: 100px; 59 left:53%; 60 margin-left: -75px; 61 margin-top: -50px; 62 top: 65%; 63 width: 150px; 64 }
这里并没有用到什么陌生的css，一个发现是，原来还有skyBlue这个颜色。
这里的云是由四个形状不一的圆组成， 主要用了圆角属性和位置属性。
在画完后，也特意查了以下MDN中border-radius的详细介绍，加深了解，这里奉上MDN的文档链接（内容较多，再转述觉得多余，也担心造成误导，直接看文档可能更好）：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius
非常详细，发现自己以前用的还是比较浅的。
今天就到这，谢谢观看。 如有错误，欢迎指正。
PS: 这次去掉了code pen的demo，因为code pen每次都要把多个css文件中的代码逐个复制进去，比较麻烦。 但如果看官觉得有code pen看起来效果更好，可以留言告诉我，我再加回去。
标签：
原文地址：http://www.cnblogs.com/bee0060/p/4970436.html
