原理：找一幅画，每隔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. 恢复SQLSERVER被误删除的数据（转——收藏）

    恢复SQLSERVER被误删除的数据 摘自:http://www.cnblogs.com/lyhabc/p/3683147.html 曾经想实现Log Explorer for SQL Server的 ...

  2. window 2003 配置FTP +防火墙设置

    2保险的做法是 不允许匿名登录,吧钩去掉 后面我们会添加一个用户,并且赋予权限 3 主目录 可以设置时当前计算机目录或者是另一台计算机目录(映射) FTP站点目录:浏览定位FTP文件所在站点,给予是否 ...

  3. js 获取、清空 input type="file"的值 .（转）

    上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的 ...

  4. three.js 相关概念

    1.什么是three.js? Three.js 是一个 3D JavaScript 库.Three.js 封装了底层的图形接口,使得程序员能够在无需掌握繁冗的图形学知识的情况下,也能用简单的代码实现三 ...

  5. 【Maven】Eclipse 使用Maven创建SpringMVC Web项目

    创建环境 系统:win 10 软件:eclipse,maven. 创建步骤 创建一个Maven Web项目,可以参照:[Maven]Eclipse 使用Maven创建Java Web项目 添加spri ...

  6. java中this用法总结

    1,当局部变量和成员变量重名的时候,在方法中使用this表示成员变量以示区分. class Demo{ String str = "这是成员变量"; void fun(String ...

  7. SQL中Group By 的使用

    1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...

  8. SQLLDR记录数与文本记录数比较

    我们平时都用sqlldr进行将文本数据加载到数据库,但是有时候由于数据问题导致入库率不能达到100%,因此我们要检测是否存在不能入库的数据记录.以下shell脚本就是统计文本中记录数和数据库中记录数是 ...

  9. [转]编译VC++程序warning C4819快速解决

    文章来自:http://www.cppblog.com/API/archive/2012/11/12/195056.aspx 编译VC++程序的时候出现如下提示警告: warning C4819: T ...

  10. 曲演杂坛--为什么SELECT语句会被其他SELECT阻塞？

    很多刚入门的DBA在捕获阻塞得时候,会问这么一个问题“为什么这个SELECT语句被那个SELECT语句阻塞了,难道不是共享锁么?” 让我们来做个小测试,首先准备一些测试数据: --========== ...