CSS 3 Testing | CSS3 部分样式测试

border-radius | 圆角

全部圆角,四个角都是圆角

独立圆角,只有部分角是圆角

Border Color | 边框颜色

边框颜色,直角,红色

颜色演示,圆角,紫色

shadow|阴影

块阴影,box-shadow

普通文字阴影,text-shadow

多重文字阴影

Background Size| 背景大小

你看到的这只小牛很高很瘦吗?
哇,如果是的话,那么你的浏览器好牛哦....

Background Size| 背景大小

这里使用了三张图片作为背景图片
如果你的浏览器中可以看到三只小牛
说明你的浏览器真的好牛哦....

Multiple Column | 多列 | 多卷

宽度

这里你能看到几列?首先请确保你的浏览器足够宽(宽度>600px)。如果你只能看到一列,那么说明你的浏览器不支持CSS3多列。如果你能看到两列以上,恭喜,你的浏览器是比较先进的。此处演示的是用列宽来创建多列效果。这里你看到的列的宽度是固定的。列数随浏览器的宽度自动调整,浏览比较宽的时候,列数会多些,浏览器窄的时候,列数也会自动减少。列的宽度不会改变。

列数

这里你能看到几列?首先请确保你的浏览器足够宽(宽度>600px)。如果你只能看到一列,那么说明你的浏览器不支持CSS3多列。如果你能看到两列以上,恭喜,你的浏览器是比较先进的。此处演示的是通过设置列数来控制创建多列效果。所以,无论你的浏览器有多宽,这里只会显示三列。只是随着浏览器的宽度的调整,每列的宽度也会自动调整。

Font Face | 嵌入字体

这里使用了一款英文字体,所以你看到的这些汉字,是以系统默认的字体显示的(一般是宋体),但是后面的英文,却是使用了自定义的字体“qianduanNet”。你能看出来是一款很个性的字体吗?事实上,这里使用的是Assin字体。
what is it ?

使用了阴影效果的font-face效果
what is it ?

opacity| 透明

RGBA

HSL & HSLA

HSL Demo

HSLA Demo