原理：找一幅画，每隔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常用语法

    --在表中添加字段if col_length('JX_DomesticStudy','XL') is null begin alter table JX_DomesticStudy add PXlev ...

  2. ubuntu工具积累

    1.sudo apt-get install terminator一款可以切分终端窗口的工具 a.在系统>键盘>快捷键修该ctrl+alt+t快捷应用为terminator,其他的快捷键同 ...

  3. 2287: 【POJ Challenge】消失之物

    Description ftiasch 有 N 个物品, 体积分别是 W1, W2, ..., WN. 由于她的疏忽, 第 i 个物品丢失了. "要使用剩下的 N - 1 物品装满容积为 x ...

  4. C#读写xml文件的常用方法

    已知有一个XML文件(bookshop.xml)如下: <?xml version="1.0" encoding="gb2312" ?> <b ...

  5. 扩展欧几里德解的数量（51nod 1352）

    题意:给出N,A,B:求A*x+ B*y = N+1   的大于0 的解的数量: 思路:先用exgcd求出大于0的初始解x,rest = N - x*A; sum = rest/LCM(A, B); ...

  6. android 一题多改系列——android 打电话实现两种方法

    在android开发中,用户能够拨打电话是最基本的需求.俗话说“条条大路通罗马”,实现拨打电话的方式有多种,今天,就提供最常用两种. 首先,拨打电话,对于用户来说,是一个耗费的操作,因此,需要一定权限 ...

  7. [C#] 與Android共舞–手機post資料給Server （转帖）

    最近在搞安卓,跟Server溝通是一定要的,這範例很簡單,就是我在Android 上面,透過POST 的方式傳資料給 Server ,則Server 收到值後直接回傳, Server side 是用a ...

  8. MongoDB中的高级查询(二)

    $mod取模运算 查询index对5取模运算等于1的数据. $not $not是元条件句,即可以用在任何其他条件之上.查询index对5取模运算不等于1的数据. $exists判断字段是否存在 查询出 ...

  9. .NET跨平台：在mac命令行下用vim手写ASP.NET 5 MVC程序

    昨天在 Mac 上手写了一个最简单的 ASP.NET 5 程序,直接在 Startup.cs 中通过 Response.WriteAsync() 输出响应内容,详见 .NET跨平台:在Mac上跟着错误 ...

  10. 创建链接服务器(dblink)

    --创建链接服务器(dblink) exec sp_addlinkedserver 'srv_lnk','','SQLOLEDB','远程服务器名或ip地址' exec sp_addlinkedsrv ...