CSS基础：div设置透明度、圆角、投影

最新推荐文章于 2024-09-23 02:01:58 发布

sasaxie

最新推荐文章于 2024-09-23 02:01:58 发布

阅读量9.2k

点赞数 4

文章标签： CSS

本文链接：https://blog.csdn.net/a191030148/article/details/51675653

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 技巧预览

设置透明度；
圆角；
投影；

2. 实战出技术

2.1 设置透明度

效果预览

图2.1 不透明效果预览

图2.2 不透明度为50%效果预览

代码展示

<!DOCTYPE html>
<html>
    <head>
        <title>实战</title>
        <meta charset="utf-8">
        <style type="text/css">
            .box {
                width: 150px;
                height: 150px;
                line-height: 150px;
                text-align: center;
                /* @Key 透明度 R G B Alpha（不透明度为50%） */
                background-color: rgba(64, 224, 208, 0.5);
            }
        </style>
    </head>
    <body>
        <div class="box">

        </div>
    </body>
</html>

知识讲解

RGBa是一种同时设置颜色和不透明度的机制。RGB代表红色、绿色和蓝色，a代表alpha透明度。background-color: rgba(64, 224, 208, 0.5);中前三个整数表示颜色的值，最后一个数字是十进制的不透明度值，所以0.5表示这个背景的不透明度是50%，换句话说，透明度是50%。值为1表示100%不透明，值为0表示完全透明。效果如图2.2所示。

2.2 圆角

效果预览

图2.3 圆角效果预览

代码展示

<!DOCTYPE html>
<html>
    <head>
        <title>实战</title>
        <meta charset="utf-8">
        <style type="text/css">
            .box {
                width: 150px;
                height: 150px;
                line-height: 150px;
                text-align: center;
                /* @Key 透明度 R G B Alpha（不透明度为50%） */
                background-color: rgba(64, 224, 208, 0.5);
                /* @Key 圆角矩形 */
                -moz-border-radius: 1em;
                -webkit-border-radius: 1em;
                border-radius: 1em;
            }
        </style>
    </head>
    <body>
        <div class="box">

        </div>
    </body>
</html>

知识讲解

其实是使用的CSS3新属性来设置边框圆角的半径，不同浏览器内核使用不同前缀：Mozilla使用-moz前缀，Safari使用-webkit前缀。此外IE、Opera和所有主流浏览器都有相似的前缀。可以使用这些前缀访问每种浏览器特有的特性，可能需要在厂商的开发人员站点上查阅可用的特性。

2.3 投影

效果预览

图2.4 投影效果预览

代码展示

<!DOCTYPE html>
<html>
    <head>
        <title>实战</title>
        <meta charset="utf-8">
        <style type="text/css">
            .box {
                width: 150px;
                height: 150px;
                line-height: 150px;
                text-align: center;
                /* @Key 透明度 R G B Alpha（不透明度为50%） */
                background-color: rgba(64, 224, 208, 0.5);
                /* @Key 圆角矩形 */
                -moz-border-radius: 1em;
                -webkit-border-radius: 1em;
                border-radius: 1em;
                /* @Key 投影 投影偏移3px，宽6px，颜色#666 */
                -webkit-box-shadow: 3px 3px 6px #666;
                -moz-box-shadow: 3px 3px 6px #666;
                box-shadow: 3px 3px 6px #666;
            }
        </style>
    </head>
    <body>
        <div class="box">

        </div>
    </body>
</html>