CSS3-国旗效果

最近在蓝色理想上看到一位达人用CSS3推出的新属性画了几张国旗，不禁偷师了一下，
先贴下地址：http://bbs.blueidea.com/thread-2985513-1-1.html
接下来简要的介绍下用到的新属性：
1.box-shadow
就是给div加上阴影效果。语法是box-shadow:left,top,XX,#xxxxxx。left是阴影与DIV左边框的距离，top当然就是和上边框了，XX这属性还没研究出来到底是什么，#xxxxxx是阴影的颜色。
2.transform：rotate(x)
这个属性是将元素翻转x度。x为正是顺时针，x的单位是deg。
3.transform：skew(x,y)
将元素边框歪曲。x为负，就是将元素的竖直方向的边框顺时针歪曲x度。y就是横向的边框。如果只传递一个参数就是将横竖都进行歪曲。
4.border-radius:top-left top-right bottom-left bottom-right
该属性作用就是将元素的边框变成圆角的。以后不用切图那么麻烦了。top-left设置左上圆角的圆心角，单位是px，其他类比。

注意：到目前为止除IE8以外的其他主流浏览器全部都支持以上的CSS3属性，听说IE要到9才会支持。而支持这些新属性的浏览器普遍使用了自己的专有属性名，如firefox，就要在属性名前面加上-moz-前缀。下面列举下这些浏览器以及属性名：
（1）firefox   加前缀-moz-
（2）chrome和safari  加前缀-webkit-
（3）opera  直接使用前面说的属性名，无需改动。

最后说下韩国国旗的原理：
首先是中间红蓝相间的圆，看代码说明会直观点

<div class="mround">　　　／／背景色为红色，四角全部圆角，是上半部分。
        <div class="halfblueround"></div>　　／／背景色为蓝色，下边的两角进行圆角化，绝对定位，是下半部分。
           　　<div class="Shalfredround"></div>　　／／中心右边的小圆，
        <div class="Shalfblueround"></div>　／／中心左边的小圆
</div>

在说下圆旁边的四个黑体部分。就不写代码了。这部分的布局类似一个“王”，中间的竖直ＤＩＶ的背景色为白色，通过设置z-index，可以遮住横向的ｄｉｖ。

 

最后是Demo