No.24 CSS--CSS3新特性（圆角、阴影、动画、媒体查询）

主要内容：

  • 圆角
  • 阴影
  • 动画

一、圆角（border-radius）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 300px;
            background-color: rgb(176, 182, 180);
            position: fixed;
            right: 5px;
            top: 300px;
            border-radius: 5px 10px 5px 10px;
        }
    </style>
</head>

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

border-radius: 100%;  变成圆

 

二、阴影（box-shadow）

  • 向框添加一个或多个阴影。

 代码示例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 300px;
            background-color: rgb(235, 240, 238);
            position: fixed;
            right: 5px;
            top: 300px;
            border-radius: 10px;
            box-shadow:2px 2px 2px rgb(117, 116, 117);
        }
    </style>
</head>

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

 

三、动画

  • 动画是使元素从一种样式逐渐变化为另一种样式的效果
  • 您可以改变任意多的样式任意多的次数
  • 请用百分比来规定变化发生的时间，或用关键词“from“和“to”，等同于0%和100%
  • 0% 是动画的开始，100% 是动画的完成

3.1动画执行

animation

 

 

 

举例：呼吸效果等

 

四、媒体查询（meta）

  • 媒体查询能使页面在不同在终端设备下达到不同的效果。
  • 媒体查询会根据设备的大小自动识别加载不同的样式。

4.1 设置meta标签

  • 使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
  • 暂时不用记meta的这几个属性，知道这段代码是在移动端显示的时候，仍然按原内容大小显示的效果。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">

　　

4.2媒体查询语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: blue;
        }
        /* 768代表手机的最大像素宽度，苹果手机是双倍像素 */
        @media screen and (max-width:768px){
            .box{
                background-color: aqua;
            }
        }
        /* 平板宽度 */
        @media screen and (min-width:768px) and (max-width:996px){
            .box{
                background-color: blueviolet;
            }   
        }
        /* 电脑屏幕 */
        @media screen and (min-width:996px){
            .box{
                background-color: rgb(142, 206, 40);
            }   
        }

    </style>
</head>

<body>
    <div class="box">
    </div>
</body>

</html>

　　

电脑宽度：

平板宽度：

手机宽度：

 

举例：京东的

 

 

 

 

 

 

 

 

 
posted @ 2025-02-28 09:13  百里屠苏top  阅读(19)  评论(0)    收藏  举报