原理：找一幅画，每隔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. SQL分页查询结果不一致

    今天遇到了SQL分页查询结果不一致的情况,一看代码,原来是没加排序查询!!分页查询最好加排序,且以唯一性高的字段进行排序,如ID,时间等,以保持每页查询结果的准确! PS:又帮别人擦屁股!!

  2. UE简单操作

    一:UE恢复默认配置      1.开始--运行-- “%APPDATA%” 回车 .      2. 找到并打开 IDMComp 文件夹.将文件夹“UltraEdit”整个给删除.      3.重 ...

  3. android stuido build 慢的解决办法

    Enable Offline Work: Click File -> Settings. Search for "gradle" and click in Offline w ...

  4. 手写DataSet,DataTable

    一:DataSet DataSet ds = new DataSet();//创建DataSet DataTable dt = new DataTable();//创建一个DataTalbe dt.C ...

  5. FastReport代码计算高度

    Dim iHeight As Double        Dim columnData_form As DataSourceBase             iHeight=Page1.TopMarg ...

  6. 不用ide编译java程序时调用jar包

    调用特定目录下的jar包 javac -cp d:\javatest\dom4j.jar Dom4jDemo.java //这部分必须注意,d:\javatest 是Dom4jDemo.class所在 ...

  7. linux下使用SSL代理（SSLedge）

    refer to: https://eurekavpt.com/page/ssledge-on-linux 启动非常简单./ssledge-term-x64 -f config -D 其中的confi ...

  8. Linux内核分析之操作系统是如何工作的

    在本周的课程中,孟老师主要讲解了操作系统是如何工作的,我根据自己的理解写了这篇博客,请各位小伙伴多多指正. 一.知识点总结 1. 三个法宝 存储程序计算机:所有计算机基础性的逻辑框架. 堆栈:高级语言 ...

  9. Static Constructors

    A static constructor is used to initialize any static data, or to perform a particular action that n ...

  10. Linux下运行jar包

    方法① 1.vim xxx.jar 2.配置程序入口:找到MANIFEST.MF,添加Main-Class:+空格+package.class 3.引入第三方jar包:①在MANIFEST.MF中加入 ...