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

最新推荐文章于 2024-07-19 06:13:09 发布

路边一只流浪猫

最新推荐文章于 2024-07-19 06:13:09 发布

阅读量157

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/null_NaN/article/details/107431118

版权

<!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>

优雅降级和渐进增强影像中是跟随css3流出来的概念，犹豫低浏览器版本不支持css3,但是css3又太优秀不忍心放弃，所以在高级浏览器中使用css3而低级浏览器
只保证最基本的功能，看上去这两个概念差不多，其实都是关注不同浏览器不同的体验，，关键的区别是侧重的内容

在这里插入图片描述

路边一只流浪猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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{
复制链接

扫一扫