原理：找一幅画，每隔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. Mysql基础2

    一.DQL下查询英语分数在 80-90之间的同学.mysql>SELECT * FROM student WHERE english>=80 AND english<=90;或者my ...

  2. windows all version - 实现指定路径共享

    调用API函数NetShareAdd()将文件夹设置为共享,调用此函数后如果不做其他设置,网络用户是无法访问共享文件夹的,因为此文件夹在NTFS分区中,同时受到NTFS文件系统的访问控制,因此还需要第 ...

  3. 第六次课：springMVC与spring的集成

    spring在项目中起到了管理bean的作用,即可以通过配置,让系统自动创建所需的对象,通过一定的方式引用系统创建的对象,对象的创建和引用都是由spring自动完成的,用户不必参与,可以直接引用. 实 ...

  4. discuz数据库表

    http://faq.comsenz.com/library/database/x3/x3_index.htm    discuz数据库表字典 Discuz X3各数据库表用途 pre_common_ ...

  5. 抓发请求&设置默认工程

    反向代理:外网服务器接受来自Internet的请求,转发到内网服务器. iptables转发:只有root才能使用1024以下的端口,域名的默认端口为80,一般不会给开发者提供root密码的.一台优质 ...

  6. Java+MySql图片数据保存与读取的具体实例

    1.创建表: drop table if exists photo;CREATE TABLE photo (    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY ...

  7. 关于Guid

    GUID(全局统一标识符)是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成GUID的API.生成算法很有意思,用到了以太网卡地址.纳秒级时间.芯片ID码和许多可 ...

  8. [leetcode 23]Merge k Sorted Lists

    1 题目 Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexi ...

  9. solr与.net系列课程(九)solr5.1的配置

    solr与.net系列课程(九)solr5.1的配置 最近一些园友来咨询solr5.1的配置方式,然后我就去官网下载了个最新版本的solr,发现solr5.0以后solr的下载包里的内容发生的变化,移 ...

  10. SpringMVC关于json、xml自动转换的原理研究[附带源码分析]

    目录 前言 现象 源码分析 实例讲解 关于配置 总结 参考资料 前言 SpringMVC是目前主流的Web MVC框架之一. 如果有同学对它不熟悉,那么请参考它的入门blog:http://www.c ...