原理：找一幅画，每隔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. 浏览器js console对象

    js中调用console写日志 console.log("some log"); console.warn("some warning"); console.e ...

  2. 用Backbone.js创建一个联系人管理系统(一)

    原文 Build a Contacts Manager Using Backbone.js: Part 1 在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建 ...

  3. js之函数

    1.倒计时定时器 timename=setTimeout("function()",delaytime); clearTimeout(timename); 2.循环定时器 time ...

  4. Html/Css(新手入门第一篇)

    一.理解web标准含义--为什么采用web标准*****将内容与样式分离1.web标准是一系列标准,就是一系列技术标准在使用时,是组合应用[1].结构化内容 html[2].表现化内容 css[3]. ...

  5. 关于最近在做的一个js全屏轮播插件

    最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...

  6. redis-cli 命令总结

    redis-cli 命令总结 Redis提供了丰富的命令(command)对数据库和各种数据类型进行操作,这些command可以在Linux终端使用.在编程时,比如使用Redis 的Java语言包,这 ...

  7. Hibernate映射问题之OneToOne【自己整理】

    首先贴上一个MkYong的例子 stock.java package com.mkyong.stock; import javax.persistence.CascadeType; import ja ...

  8. node-inspector:Failed to open socket on port 5858, waiting 1000 ms before retrying

    输入: ps ax | grep node 对应PID为xxxxx 强制杀死进程: xxxxx 或者直接: killall node

  9. Android 5.x特性概览四

    上节,我们说了palatte及其特性,这里我们介绍Android 5.x的另一个特性视图与阴影. 在第一节,我们就提到了Material Design 一大特性就是就是扁平化,倘若说 iOS 的扁平化 ...

  10. SQL Server 导入大数据脚本

    .先使用win+r运行cmd .执行osql -S DESKTOP-RGBEDS3 -U sa -P liyang -d FGCPOE_十院 -i D:\数据库\script.sql 即可!