原理：找一幅画，每隔5 pixel取一个点的RGB，在CSS中用box-shadow描绘出这个点

Python

from PIL import Image

if __name__ == '__main__':

    with open('C:\\css.txt', 'w') as f:

        im = Image.open('C:\\sky.jpg')

        for x in range(0, im.size[0], 5):

            for y in range(0, im.size[1], 5):

                line = '{0}px {1}px 5px 4px rgb{2},\n'.format(x, y, im.getpixel((x, y)))

                f.write(line)

HTML

<html>

    <head>

    </head>

    <body>

        <div id="painter"></div>

        <style>

            html{

                margin:0; padding:0;

            }

            #painter{

                width:0px; height:0px;

                position:relative; left:100px; top:100px;

                box-shadow: 0px 0px 5px 4px rgb(100, 105, 108),

0px 5px 5px 4px rgb(130, 163, 170),

0px 10px 5px 4px rgb(177, 180, 137),

0px 15px 5px 4px rgb(102, 119, 145),

.................

895px 555px 5px 4px rgb(32, 23, 28),

895px 560px 5px 4px rgb(32, 16, 17);

            }

        </style>

    </body>

</html>

效果

下图并不是图片

 

用CSS box-shadow画画的更多相关文章

  1. CSS Box Model（盒子模型）

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  2. CSS Box Model All In One

    CSS Box Model All In One CSS 盒子模型 All In One CSS Box Model CSS Box Model Module Level 3 W3C Working ...

  3. CSS Box Model 盒子模型

    1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...

  4. CSS BOX模型

    对于box模型概念的理解以及它与决定元素最终尺寸的方式有何关系,是理解如何设定网 页上的元素位置的基础.box模型应用到块级元素.一个随之而来的概念,内联布局模型 定义了如何设定内联元素的位置. 对于 ...

  5. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  6. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  7. CSS 奇技淫巧十八招

    http://www.tuicool.com/articles/VZneI3   開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...

  8. 一些CSS3新技术

    前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专有属性.选择器(属性选择器.连字符.伪类.伪元素).RGBA ...

  9. Element.shadowRoot

    Element.shadowRoot http://www.zhuyuntao.cn/shadow-dom的样式/ Shadow DOM的样式 我们已经可以使用原生的操作DOM的方式和使用模板的方式来 ...

  10. CSS 笔记三（Tables/Box Model/Outline）

    CSS Tables border border: border-width border-style border-color|initial|inherit; border-width borde ...

随机推荐

  1. 【Java学习笔记】Map

    Map: 一次添加一对元素,也称为双列集合. 而Collection,一次添加一个元素,称为单列集合. 常用方法: 1.添加 value  put(key,value);        返回前一个与k ...

  2. weborm 简单控件

    Label - 显示文字,编译后是spanLiteral - 显示文字,编译后没有形成元素 只是文字 一般用来输出 js代码内容 TextBox - 文本框 TextMode -普通文本框 singl ...

  3. Controller将Model数据传给View层，View层应该如何处理？

    首先,我们在Model层中添加一个Person类. namespace MVCTest.Models{    public class Person    {        public string ...

  4. bookshelf

    nodejs mysql ORM 比node-mysql好用多了. bookshelf 支持restful功能,用到的时候研究下:https://www.sitepoint.com/getting-s ...

  5. windows小技巧 从文件夹直接打开命令行位置

    windows下从命令行打开某个目录下的东东时,会一直cd  ~~~~,更简单的是: 直接用鼠标找到该文件夹或者文件,按住Shift键然后点击鼠标右键,选择"在此处打开命令行"即可 ...

  6. WebSphere试用过期问题处理

    WebSphere Application Server的试用期为60天,过期将无法启动WAS. E:\IBM\WebSphere\AppServer\profiles\Dmgr01\bin>s ...

  7. 总结一下一般游戏中3D模型各种勾边方法遇到的工程性问题

    以前做过简单的rim light勾边,几何勾边,这次又做了后处理的勾边,工程化的时候,都遇到很多问题,简单总结一下. 首先是火炬之光勾边效果,类似轮廓光的实现,简单的卡通渲染也是通过类似的算法加采样色 ...

  8. 备份数据库的时候设置 BufferCount 选项不正确导致 out of memory 的情况

    备份数据库的时候设置 BufferCount 选项不正确导致 out of memory 的情况 今天群里面的东辉兄跟我说备份生产数据库的时候报错 环境: 32位的SQLSERVER2008 机器有1 ...

  9. 使用 Aspose.Slide 获取PPT中的所有幻灯片的标题

    本文使用的是第三方类库 Aspose.Slide,如果你使用的是OpenXml可以看下面的链接,原理是相同的,这个文章里也有对Xml标签的详细解释. 如何:获取演示文稿中的所有幻灯片的标题 原理: 原 ...

  10. ARCGIS FOR JAVASCRIPT API 出现multipleDefine问题

    问题: Error {src: "dojoLoader", info: Object, stack: (...), message: "multipleDefine&qu ...