免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
› 论坛 › 程序设计 › Web开发 › CSS是如何做出弯弯曲曲的线条出来的？
12下一页
最近访问板块 发新帖
查看: 5313 | 回复: 10
打印 上一主题 下一主题

CSS是如何做出弯弯曲曲的线条出来的？ [复制链接]

akyahoo

论坛徽章:
0
跳转到指定楼层
1楼 [收藏(0)] [报告]
发表于 2009-09-05 12:53 |只看该作者 |倒序浏览
<div style="width: 100%; height: 466px;">

  <div style="float: left; border: 2px solid #000; line-height: normal; background-color: #fff;">

    <div style="width: 6.23em; height: 7.7em; font-family: Verdana; font-size: 60px; overflow: hidden;">

      <div style="margin-top: -0.7em">

        <div style="position: absolute; padding-left: 1.56em; padding-top: 0.37em;">

          <div style="font-size: 2.57em; font-weight: bold; color: #000;">o</div>

        </div>

        <div style="position: absolute; padding-left: 1.62em; padding-top: 0.53em;">

          <div style="font-size: 2.38em; font-weight: bold; color: #fff;">o</div>

        </div>

        <div style="position: absolute; padding-left: 1.2em; padding-top: 0.67em;">

          <div style="font-size: 2.48em; color: #000;">o</div>

        </div>

        <div style="position: absolute; padding-left: 1.29em; padding-top: 0.85em;">

          <div style="font-size: 2.23em; color: #fff;">o</div>

        </div>

        <div style="position: absolute; padding-left: 1.57em; padding-top: 2.03em;">

          <div style="width: 0.32em; height: 0.52em; background-color: #fff;"></div>

        </div>

        <div style="position: absolute; padding-left: 1.52em; padding-top: 1.56em;">

          <div style="font-size: 0.8em; font-style: italic; color: #000;">(</div>

        </div>

        <div style="color: #000;">

          <div style="position: absolute; padding-left: 1.07em; padding-top: 0.62em;">

            <div style="font-size: 4.57em;">O</div>

          </div>

          <div style="position: absolute; padding-left: 1.05em; padding-top: 1.15em;">

            <div style="font-size: 3.53em;">O</div>

          </div>

          <div style="position: absolute; padding-left: 1.12em; padding-top: 0.74em;">

            <div style="font-size: 4.63em;">O</div>

          </div>

          <div style="position: absolute; padding-left: 1.08em; padding-top: 3.64em;">

            <div style="font-size: 1.77em; font-weight: bold; font-style: italic;">\</div>

          </div>

          <div style="position: absolute; padding-left: 1.17em; padding-top: 4.8em;">

            <div style="font-size: 3.29em; font-weight: bold; font-style: italic;">L</div>

          </div>

          <div style="position: absolute; padding-left: 3.14em; padding-top: 5.21em;">

            <div style="font-size: 3.01em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div>

          </div>

          <div style="position: absolute; padding-left: 4.13em; padding-top: 3.23em;">

            <div style="font-size: 0.7em; font-weight: bold;">O</div>

          </div>

          <div style="position: absolute; padding-left: 1.37em; padding-top: 5.08em;">

            <div style="font-size: 0.97em; font-weight: bold;">O</div>

          </div>

        </div>

        <div style="color: #FED90E">

          <div style="position: absolute; padding-left: 1.15em; padding-top: 0.76em;">

            <div style="font-size: 4.37em;">O</div>

          </div>

          <div style="position: absolute; padding-left: 1.14em; padding-top: 1.26em;">

            <div style="font-size: 3.37em;">O</div>

          </div>

          <div style="position: absolute; padding-left: 1.2em; padding-top: 0.87em;">

            <div style="font-size: 4.42em;">O</div>

          </div>

          <div style="position: absolute; padding-left: 1.15em; padding-top: 3.61em;">

            <div style="font-size: 1.7em; font-weight: bold; font-style: italic;">\</div>

          </div>

          <div style="position: absolute; padding-left: 1.24em; padding-top: 4.93em;">

            <div style="font-size: 3.18em; font-weight: bold; font-style: italic;">L</div>

          </div>

          <div style="position: absolute; padding-left: 3.03em; padding-top: 5.05em;">

            <div style="font-size: 3.2em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div>

          </div>

          <div style="position: absolute; padding-left: 4.18em; padding-top: 3.34em;">

            <div style="font-size: 0.55em; font-weight: bold;">O</div>

          </div>

        </div>

        <div style="position: absolute; padding-left: 1.84em; padding-top: 2.37em;">

          <div style="width: 1.92em; height: 5.76em; background-color: #FED90E;"></div>

        </div>

        <div style="position: absolute; padding-left: 3.70em; padding-top: 2.73em;">

          <div style="width: .30em; height: 1.56em; background-color: #FED90E;"></div>

        </div>

        <div style="position: absolute; padding-left: 4.36em; padding-top: 3.51em;">

          <div style="width: .16em; height: .34em; background-color: #FED90E;"></div>

        </div>

        <div style="position: absolute; padding-left: 1.62em; padding-top: 5.47em;">

          <div style="font-size: 10px">

            <div style="width: 2.6em; height: 3.0em; background-color: #FED90E;"></div>

          </div>

        </div>

        <div style="color: #000;">

          <div style="position: absolute; padding-left: 1.23em; padding-top: 4.57em;">

            <div style="font-size: 0.67em;"></div>

          </div>

          <div style="position: absolute; padding-left: 1.23em; padding-top: 4.37em;">

            <div style="font-size: 0.67em;"></div>

          </div>

          <div style="position: absolute; padding-left: 1.34em; padding-top: 4.37em;">

            <div style="font-size: 0.67em;">\</div>

          </div>

          <div style="position: absolute; padding-left: 1.4em; padding-top: 4.53em;">

            <div style="font-size: 0.67em;">\</div>

          </div>

          <div style="position: absolute; padding-left: 1.55em; padding-top: 4.49em;">

            <div style="font-size: 0.67em;"></div>

          </div>

          <div style="position: absolute; padding-left: 1.55em; padding-top: 4.19em;">

            <div style="font-size: 0.67em;"></div>

          </div>

          <div style="position: absolute; padding-left: 1.66em; padding-top: 4.19em;">

            <div style="font-size: 0.67em;">\</div>

          </div>

          <div style="position: absolute; padding-left: 1.76em; padding-top: 4.45em;">

            <div style="font-size: 0.67em;">\</div>

          </div>

          <div style="position: absolute; padding-left: 1.27em; padding-top: 2.54em;">

            <div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>

          </div>

          <div style="position: absolute; padding-left: 1.51em; padding-top: 2.18em;">

            <div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div>

          </div>

          <div style="position: absolute; padding-left: 2.31em; padding-top: 5.32em;">

            <div style="font-size: 1.47em; font-weight: bold; font-style: italic;">(</div>

          </div>

          <div style="position: absolute; padding-left: 2.29em; padding-top: 5.69em;">

            <div style="font-size: 1.11em; font-weight: bold;">(</div>

          </div>

          <div style="position: absolute; padding-left: 2.92em; padding-top: 4.72em;">

            <div style="font-size: 2.4em; font-weight: bold;">8</div>

          </div>

          <div style="position: absolute; padding-left: 2.43em; padding-top: 3.96em;">

            <div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>

          </div>

          <div style="position: absolute; padding-left: 2.31em; padding-top: 4.05em;">

            <div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div>

          </div>

          <div style="position: absolute; padding-left: 2.33em; padding-top: 4.37em;">

            <div style="font-size: 3.06em; font-weight: bold;">o</div>

          </div>

        </div>

        <div style="color: #CDB26F">

          <div style="position: absolute; padding-left: 2.39em; padding-top: 5.36em;">

            <div style="font-size: 1.38em; font-weight: bold; font-style: italic;">(</div>

          </div>

          <div style="position: absolute; padding-left: 2.37em; padding-top: 5.75em;">

            <div style="font-size: 1.04em; font-weight: bold;">(</div>

          </div>

          <div style="position: absolute; padding-left: 2.95em; padding-top: 4.82em;">

            <div style="font-size: 2.25em; font-weight: bold;">8</div>

          </div>

          <div style="position: absolute; padding-left: 2.49em; padding-top: 4.15em;">

            <div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>

          </div>

          <div style="position: absolute; padding-left: 2.39em; padding-top: 4.22em;">

            <div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div>

          </div>

          <div style="position: absolute; padding-left: 2.4em; padding-top: 4.5em;">

            <div style="font-size: 2.87em; font-weight: bold;">o</div>

          </div>

        </div>

        <div style="position: absolute; padding-left: 2.98em; padding-top: 6.09em;">

          <div style="width: .76em; height: 1em; background-color: #CDB26F;"></div>

        </div>

        <div style="color: #000">

          <div style="position: absolute; padding-left: 3.69em; padding-top: 4.28em;">

            <div style="font-size: 2.2em;">o</div>

          </div>

          <div style="position: absolute; padding-left: 4.62em; padding-top: 5.42em;">

            <div style="font-size: 1.01em;">)</div>

          </div>

          <div style="position: absolute; padding-left: 4.78em; padding-top: 5.72em;">

            <div style="font-size: 0.72em;">)</div>

          </div>

          <div style="position: absolute; padding-left: 4.53em; padding-top: 5.65em;">

            <div style="font-size: 0.94em;">b</div>

          </div>

          <div style="position: absolute; padding-left: 4em; padding-top: 5.09em;">

            <div style="font-size: 1.59em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 3.33em; padding-top: 4.79em;">

            <div style="font-size: 1.95em; font-weight: bold;">O</div>

          </div>

          <div style="position: absolute; padding-left: 3.15em; padding-top: 4.3em;">

            <div style="font-size: 2.42em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 3.01em; padding-top: 4.46em;">

            <div style="font-size: 2.23em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 2.88em; padding-top: 4.43em;">

            <div style="font-size: 2.23em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 2.81em; padding-top: 4.71em;">

            <div style="font-size: 1.9em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 3.69em; padding-top: 4.74em;">

            <div style="font-size: 1.97em; font-weight: bold;">o</div>

          </div>

        </div>

        <div style="color: #CDB26F">

          <div style="position: absolute; padding-left: 3.7em; padding-top: 4.4em;">

            <div style="font-size: 2.06em;">o</div>

          </div>

          <div style="position: absolute; padding-left: 4.57em; padding-top: 5.44em;">

            <div style="font-size: 0.95em;">)</div>

          </div>

          <div style="position: absolute; padding-left: 4.49em; padding-top: 5.66em;">

            <div style="font-size: 0.88em;">b</div>

          </div>

          <div style="position: absolute; padding-left: 4.01em; padding-top: 5.14em;">

            <div style="font-size: 1.48em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 3.37em; padding-top: 4.84em;">

            <div style="font-size: 1.83em; font-weight: bold;">O</div>

          </div>

          <div style="position: absolute; padding-left: 3.21em; padding-top: 4.38em;">

            <div style="font-size: 2.27em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 3.07em; padding-top: 4.54em;">

            <div style="font-size: 2.09em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 2.95em; padding-top: 4.53em;">

            <div style="font-size: 2.08em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 2.88em; padding-top: 4.78em;">

            <div style="font-size: 1.78em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 3.71em; padding-top: 4.79em;">

            <div style="font-size: 1.85em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 2.87em; padding-top: 4.59em;">

            <div style="font-size: 1.93em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 3.09em; padding-top: 4.55em;">

            <div style="font-size: 1.93em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 2.73em; padding-top: 5.03em;">

            <div style="font-size: 1.44em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 2.59em; padding-top: 5.77em;">

            <div style="font-size: 0.82em; font-weight: bold;">o</div>

          </div>

          <div style="position: absolute; padding-left: 3.04em; padding-top: 6.4em;">

            <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>

          </div>

          <div style="position: absolute; padding-left: 3.03em; padding-top: 6.4em;">

            <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>

          </div>

          <div style="position: absolute; padding-left: 3.02em; padding-top: 6.4em;">

            <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div>

          </div>

        </div>

        <div style="position: absolute; padding-left: 3.24em; padding-top: 2.49em;">

          <div style="font-size: 2.76em; font-weight: bold; color: #000;">•</div>

        </div>

        <div style="position: absolute; padding-left: 3.34em; padding-top: 2.68em;">

          <div style="font-size: 2.49em; font-weight: bold; color: #fff;">•</div>

        </div>

        <div style="position: absolute; padding-left: 4.2em; padding-top: 4.26em;">

          <div style="font-size: 0.28em; font-weight: bold; color: #000;">•</div>

        </div>

        <div style="position: absolute; padding-left: 3.9em; padding-top: 4.05em;">

          <div style="font-size: 1.47em; font-weight: bold; color: #000;">•</div>

        </div>

        <div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;">

          <div style="font-size: 1.2em; font-weight: bold; color: #FED90E;">•</div>

        </div>

        <div style="position: absolute; padding-left: 3.66em; padding-top: 4.7em;">

          <div style="font-size: 10px">

            <div style="width: 4.6em; height: 3.88em; background-color: #FED90E;"></div>

          </div>

        </div>

        <div style="position: absolute; padding-left: 3.68em; padding-top: 3.36em;">

          <div style="font-size: 1.2em; color: #000;">_</div>

        </div>

        <div style="position: absolute; padding-left: 3.68em; padding-top: 4.03em;">

          <div style="font-size: 1.2em; color: #000;">_</div>

        </div>

        <div style="position: absolute; padding-left: 3.64em; padding-top: 4.03em;">

          <div style="font-size: 1.2em; color: #000;">_</div>

        </div>

        <div style="position: absolute; padding-left: 1.96em; padding-top: 2.33em;">

          <div style="font-size: 3.04em; font-weight: bold; color: #000;">•</div>

        </div>

        <div style="position: absolute; padding-left: 2.06em; padding-top: 2.5em;">

          <div style="font-size: 2.77em; font-weight: bold; color: #fff;">•</div>

        </div>

        <div style="position: absolute; padding-left: 2.67em; padding-top: 4.23em;">

          <div style="font-size: 0.28em; font-weight: bold; color: #000;">•</div>

        </div>

        <div style="position: absolute; padding-left: 1.46em; padding-top: 5.18em;">

          <div style="font-size: 0.66em; color: #000;">C</div>

        </div>

        <div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;">

          <div style="font-size: 0.66em; color: #000;">C</div>

        </div>

        <div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;">

          <div style="font-size: 10px">

            <div style="width: 2.2em; height: 2.2em; background-color: #FED90E;"></div>

          </div>

        </div>

        <div style="position: absolute; padding-left: 1.45em; padding-top: 5.19em;">

          <div style="font-size: 0.8em; font-weight: bold; color: #FED90E;">O</div>

        </div>

        <div style="position: absolute; padding-left: 1.58em; padding-top: 5.47em;">

          <div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">(</div>

        </div>

        <div style="position: absolute; padding-left: 1.62em; padding-top: 5.46em;">

          <div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">-</div>

        </div>

      </div>

    </div>

  </div>

</div>
akyahoo

论坛徽章:
0
2楼 [报告]
发表于 2009-09-05 12:54 |只看该作者
把上面的代码。保存到为一个.htm网页。就可以显示出一个卡通头像。

我没看明白。这是如何做出来的？CSS不是只能横水平的线条或区域吗？

实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
shopokey

论坛徽章:
0
3楼 [报告]
发表于 2009-09-05 22:12 |只看该作者
晕，你发这么长的代码谁会去看啊
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
akyahoo

论坛徽章:
0
4楼 [报告]
发表于 2009-09-06 07:25 |只看该作者
它这个网页就这么多代码。没办法啦。

否则你就看不到完整的卡通头像了。
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
HonestQiao

论坛徽章:
1
技术图书徽章 日期:2013-12-05 23:25:45
5楼 [报告]
发表于 2009-09-07 23:26 |只看该作者
你如果明白了，屏幕上的图像，实际上，最终都是由一个个像素点组成的，那么就好理解了。

回家看看你们家的电视，是不是一个个小格子的？
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
hbfnjx

论坛徽章:
0
6楼 [报告]
发表于 2009-09-08 14:22 |只看该作者
不错，由点及面
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
nonultimate

论坛徽章:
0
7楼 [报告]
发表于 2009-09-15 16:44 |只看该作者
何必这么麻烦呢，用svg就轻松搞定！
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
hao3721

论坛徽章:
0
8楼 [报告]
发表于 2009-09-28 11:34 |只看该作者
一个一个的小小的大大的像素七拼八凑弄起来的嘛。
哆嗦吧？？呵呵。
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
轩辕砍刀

论坛徽章:
0
9楼 [报告]
发表于 2009-11-18 17:16 |只看该作者
好玩
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
root@China

论坛徽章:
26
卯兔 日期:2014-12-02 13:53:28射手座 日期:2015-03-22 23:40:50午马 日期:2015-03-22 23:41:25寅虎 日期:2015-03-22 23:41:41亥猪 日期:2015-03-22 23:42:22戌狗 日期:2015-03-22 23:42:51酉鸡 日期:2015-03-22 23:43:29申猴 日期:2015-03-22 23:43:51未羊 日期:2015-03-22 23:44:15子鼠 日期:2015-03-22 23:45:11丑牛 日期:2015-03-22 23:45:32辰龙 日期:2015-03-22 23:45:53
10楼 [报告]
发表于 2009-11-19 18:35 |只看该作者
有点眼晕
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号：11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们：huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP