用CSS3写出Hello World!

May 25, 2010 at 01:04:32

一般的计算机语言入门的时候都会有经典的一课——输出hello world!其实就是要让读者觉得能让计算机说出hello world就意味着能让它做任何事。
但是CSS没有。CSS是一门标记性语言,用于定义文档对象的高宽等样式。同为标记性语言的HTML很简单就能让网页输出hello world但是CSS不行。
所以今天我就稍微用了一下CSS3,尚未普及使用的新标准,来补当初学CSS时没有上过的经典一课。

其实实现起来也不能,就是麻烦了点。枫影这里参考到的字体是经典的Arial,需要用到的CSS3新标记为:
border-radius和rotate。也就这两个。本想加个box-shadow(因为不是字体而是用div画出来的所以没用到text-shadow),不过我的div有遮罩,就懒得去改了。

下面是在FF和Chrome下浏览的截图:
两者的显示效果,或者说对上面两个标记的支持是一样的。

下面附上DEMO观看地址以及源码下载:

DEMO地址:http://www.windyshade.com/wp-content/wh-demos/css3-hello-world/helloworld.html

源码:猛击下载源码

Tags: