css3带来的渐进增强和优雅降级

最新推荐文章于 2025-12-22 16:42:08 发布

原创最新推荐文章于 2025-12-22 16:42:08 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

本文探讨了在不同浏览器环境下，如何利用CSS3实现优雅降级和渐进增强，确保网页在高版本浏览器中展现丰富效果，同时在低版本浏览器中保持基本功能，提升用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        /* 优雅降级，侧重点于高浏览器，主要针对最高级，最完善的浏览器设计网页 */
        .box{
            width: 200px;
            height:100px;
            border: 1px solid red;
            /* 使用的css3属性 */
            transition: all ease 0s; 
            /* 有一些浏览器不支持就往下兼容 */
           -webkit-transition:all 1s ease 0s;
            -moz-transition:all 1s ease 0s;
             -o-transition: all 1s ease 0s;

        }
           /* 渐进增强，侧重点于低浏览器，主要关注内容的本身
        .box{
            width: 200px;
            height:100px;
            border: 1px solid red;
            -webkit-transition:all 1s ease 0s;
              -moz-transition:all 1s ease 0s;
               -o-transition: all 1s ease 0s; 
                transition:all 1s ease 0s;
        } */
        .box:hover{
            width: 400px;
        }
    </style>
</head>
<body>
        
        <!-- <iframe src="https://blog.gitee.com/" frameborder="0" width="100%" height="100%"></iframe> -->
        <div class="box">
            hello
        </div>
       
</body>
</html>