HTML5 rgba 与shaodow、radius综合

weixin_30451709

于 2013-01-29 21:52:00 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yokoboy/archive/2013/01/29/2882077.html

本文介绍了一种使用CSS进行布局和样式的技巧，包括如何设置背景颜色、阴影、边框圆角等，并展示了这些效果在现代浏览器中的表现。需要注意的是，在IE8及以下版本中可能无法正常显示。

css

        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            background:blue;
            width:400px;
            height:200px;
            margin:50px auto;
            padding:50px;
            position:relative;
            font-size:40px;
            font-family:\5FAE\8F6F\96C5\9ED1;
            text-align:center;
            font-weight:bolder;
            line-height:150px;
            /* rgba 设置背景颜色  包括透明度 */
            background-color: rgba(255,23,234,0.4);
            box-shadow:0px 0px 20px rgba(0,0,0,0.4) inset;
            text-shadow:0px 0px 5px rgba(0,0,0,0.4);
            border-radius: 20px 20px 20px 20px;
        }

html

    <div style="position:absolute; top:100px; "></div>
    　　<div>
        　　yokoboy
    　　</div>
    <div style="position:absolute; top:100px;right: 0px;"></div>