首页 > 其他分享 >CSS3新特性

CSS3新特性

时间：2024-08-26 13:52:42浏览次数：17  
标签：CSS3 box 动画 color 特性 width background shadow

一、圆角

1、border-radius属性（圆角）

通过​border-radius​属性可以给任何元素设置​“圆角”​。

如果你在​border-radius属性中只指定​一个值​，那么将生成 ​4个圆角​。

但是，如果你要在四个角上​一一指定​，可以使用以下规则：

  • ​四个值​: 第一个值为​左上角​，第二个值为​右上角​，第三个值为​右下角​，第四个值为​左下角​。
  • ​三个值​: 第一个值为​左上角​, 第二个值为​右上角和左下角​，第三个值为​右下角​
  • ​两个值​: 第一个值为​左上角与右下角​，第二个值为​右上角与左下角​
  • ​一个值​： 四个圆角值相同

下面例子是设置一个值的效果：

HTML代码：

<html>
<head>
   <link rel="stylesheet" href="CSS3.css">
</head>
<body>
	<div >hello everyone</div>
</body>
</html>

CSS代码：

div {
   border-radius: 20px;
   background-color: green;
   color: white;
}

执行结果：

下面例子是设置四个值的效果：

CSS代码：

div{
    border-radius: 0 0 20px 20px;
    background-color: green;
    color: white;
}

执行结果：

2、通过border-radius创建一个圆形

通过将元素的​border-radius​设置成元素​高度​以及​宽度​的​一半​可以将元素变成​圆形​。也可以使用​百分比​哟。

示例中矩形元素的宽度和高度均为200px。通过将border-radius设置为​100px​，或者​50%​；矩形元素将变成圆形。

HTML代码：

<html>
<head>
   <link rel="stylesheet" href="CSS3.css">
</head>
<body>
	<div class= "div1">hello world</div>
        <div class= "div2">hello world</div>
</body>
</html>

CSS代码：

div {
   width: 200px;
   height: 200px;
   border-radius: 100px;
   background-color: green;
   color: white;
   text-align: center;
   line-height: 200px;
}
.div1 {
    border-radius: 100px;
    background-color: green;
    margin-bottom: 20px;
}
.div2 {
    border-radius: 50%;
    background-color: red;
}

执行结果：

二、阴影 

1、box-shadow属性（阴影效果）

​box-shadow​属性可以为元素增加​阴影效果​。

注意：​boxShadow​属性把一个或多个下拉阴影添加到框上。该属性是一个用​逗号分隔​阴影的列表，每个阴影由​2-4个长度值​、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

box-shadow的属性介绍（使用的时候必须按顺序设置）

​box-shadow:​ h-shadow  v-shadow  blur  spread  color  inset;

  1. ​h-shadow​： 必需。​水平阴影​的位置。允许负值 。
  2. ​v-shadow​： 必需。​垂直阴影​的位置。允许负值。
  3. ​blur​： 可选。​模糊距离​。
  4. ​spread​： 可选。​阴影的尺寸​。
  5. color​:  可选。​阴影的颜色​。参阅CSS颜色值。
  6. ​inset​： 可选。从外层的阴影（开始时）改变阴影​内侧阴影​

如下，给div添加阴影

HTML代码：

<html>
<head>
	<link rel="stylesheet" href="CSS3.css">
</head>
<body>
	<div >hello world</div>
</body>
</html>

CSS代码：

div {
   width: 300px;
   height: 100px;
   background-color: #9ACD32;
   box-shadow: 10px 10px #888888;
}

执行结果：

2、box-shadow的模糊和扩散

除了​颜色(color)​外，​box-shadow​元素还有两个可选值，它们是​模糊(blur)​和​扩散(spread)​。

如下例子:

HTML代码：

<html>
<head>
	<link rel="stylesheet" href="CSS3.css">
</head>
<body>
	<div >hello world</div>
</body>
</html>

CSS代码：

div {
   width: 300px;
   height: 100px;
   background-color: #9ACD32;
    box-shadow: 10px 10px 5px 5px #888888;
}

执行结果：

3、在box-shadow中使用负值

负值​也可以用于​box-shadow​中：

​h-shadow​ - 阴影将在框的​左侧​

​v-shadow​ - 阴影将在框​上方​

​blur ​- 不允许使用负值

​spread ​- 负值会导致​阴影缩小​

如下例子:

HTML代码：

<html>
<head>
	<link rel="stylesheet" href="CSS3.css">
</head>
<body>
	<div >hello world</div>
</body>
</html>

CSS代码：

div {
   width: 300px;
   height: 100px;
   background-color: #9ACD32;
   box-shadow: -15px -15px 5px -5px #888888;
}

执行结果：

三、动画

1、CSS3动画

动画让一个元素从一种风格逐渐转变为另一种风格。

您可以根据需要更改任意数量的CSS属性。

关键帧将保存元素在特定时间的样式

@keyframes规则

当您在@keyframes规则中指定CSS样式时，动画将在某些时间从当前样式逐渐变为新样式。

要使动画起作用，必须将动画绑定到元素。

2、@keyframes创建动画

使用@keyframes规则，你可以创建动画

 @keyframes name{
    from|0%  {
        css样式
    }
    50%  {
        css样式
    }
    70%  {
        css样式
    }
    to|100% {
        css样式
    }
}

name：动画名称，开发人员自己命名；

percent：为百分比值，可以添加多个百分比值；

3、animation执行动画 

animation：name duration timing-function delay iteration-count direction;

(animation-timing-function)​动画定时功能指定动画的​速度曲线​。 它可以有以下值：

  • ​ease​ - 逐渐变慢（默认值）
  • ​linear​ - 匀速
  • ​ease-in​- 加速
  • ​ease-out​- 减速
  • ​ease-in-out​- 先加速后减速
  • ​cubic-bezier(n,n,n,n)​ - 让你在一个cubic-bezier函数中定义你自己的值，可能的值是从 ​0 到 1 ​的数值。

animation-direction​属性指定如何应用​关键帧​，值可以设置为：

  • ​normal​- 默认值，这意味着它从0%到100%前进。
  • ​reverse​ - 从100%到0%的相反方向播放关键帧
  • ​alternate​ - 动画首先向前，然后向后，然后向前。
  • ​alternate-reverse- 动画首先倒退，然后前进，然后倒退。
3.1切换背景颜色 

以下示例将更改元素的背景颜色三次：动画完成50％，完成70％，动画完成100％时。

<head> 
<style>
        div{
            width:200px;
            height:200px;
            background-color:grey;
            animation:hello 3s linear 0s infinite; 
            /*动画名称为hello， 持续时间为3s，
              动画效果匀速，延时0s，无限循环*/
        }
            div:hover{
                animation-play-state: paused; /*鼠标触碰时停止*/
           }
       @keyframes hello{
    0%  {background-color:red;}
    50%  {background-color:yellow;}
    70%  {background-color:blue;}
    100% {background-color:green;}
       }
        
    </style>
</head>
<body>
       <div></div>
</body>

执行结果：

<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="4Igw5IQi-1724640108488" src="https://live.csdn.net/v/embed/419966"></iframe>

3.2呼吸效果

动画呈现出来的效果像呼吸一样

<head>
<style>
        .box{
            width:300px;
            height:300px;
            margin:40px auto;
            background-color: #2b92d4;
            border-radius: 50%;/*圆形*/
            box-shadow: 0 1px 2px rgba(0,0,0,0.3);/*阴影*/
          animation:breathe 1s ease-in-out  infinite alternate; 
 /* 动画名称为breathe，持续时间为1s，动画先加速后减速，无限循环，动画播放方向：首先向前，然后向后，然后向前*/
        }
       @keyframes breathe{
    0%  {
        opacity:0.2;/*透明度*/
        box-shadow: 0 1px 2px rgba(255,255,255,0.1)}
    50%  {
        opacity:0.5;/*透明度*/
        box-shadow: 0 1px 2px rgba(18,190,84,0.76)}
    100% {
        opacity:1;/*透明度*/
        box-shadow: 0 1px 30px rgba(59,255,255,1)}
       }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>

执行结果：

<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="ItOjEfCR-1724646169579" src="https://live.csdn.net/v/embed/420058"></iframe>

四、媒体查询

媒体查询能使页面在不同终端设备下达到不同的效果

媒体查询会根据设备的大小自动识别加载不同的样式

1、设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1,user-scalable=no">

参数解释：

  1. width=device-width宽度等于当前设备的宽度
  2.  initial-scale初始的缩放比例（默认设置为1.0）
  3. maximum-scale允许用户缩放到的最大比例（默认设置为1.0）
  4. user-scalable用户是否可以手动缩放（默认设置为no）

2、媒体查询语法

<head>
<style>
         .box{
            width:300px;
            height:300px;
         }
         @media screen and (max-width:768px){/*and与括号之间需有空格*/
            .box{
                background-color: aqua;/*当屏幕尺寸小于768px时，背景颜色为蓝色*/
            }
            .p1{
                display: none;/*当屏幕尺寸小于768px时，不显示p1内容*/
            }
            .p2{
                display: none;/*当屏幕尺寸小于768px时，不显示p2内容*/
            }
         }
         @media screen and (max-width:996px)and (min-width:768px){/*and与括号之间需有空格*/
            .box{
                background-color: blueviolet;/*当屏幕尺寸大于768px，小于996px时，背景颜色为紫色*/
            }
            .p1{
                display: none;/*当屏幕尺寸大于768px，小于996px时，不显示p1内容*/
            }
            .p2{
                display: block;/*当屏幕尺寸大于768px，小于996px时，显示p2内容*/
            }
         }
         @media screen and (min-width:996px){/*and与括号之间需有空格*/
            .box{
                background-color:red;/*当屏幕尺寸大于996px时，背景颜色为红色*/
            }
            .p1{
                display: block;/*当屏幕尺寸大于996px时，显示p1内容*/
            }
            .p2{
                display: block;/*当屏幕尺寸大于996px时，显示p2内容*/
            }
         }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="p1">哈哈哈</div>
    <div class="p2">呵呵呵</div>
</body>

执行结果：

<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="IDWX0apQ-1724651931043" src="https://live.csdn.net/v/embed/420101"></iframe>

标签：CSS3,box,动画,color,特性,width,background,shadow
From： https://blog.csdn.net/qq_72013756/article/details/141529206

相关文章

  • Pulsar 入门实战(2)--特性及架构
    本文主要介绍Pulsar的特性及架构，对应的pulsar版本为3.3.x。1、Pulsar特性Pulsar实例原生支持多个集群，并且在集群之间实现了无缝的地理复制消息。极低的发布和端到端延迟。无缝扩展至超过一百万个主题。简单的客户端API，支持Java、Go、Python和C++语言。多种订阅......
  • C++11新特性（四）：库特性
    C++11新特性库特性std::move用于实现移动语义的函数，完成左值到右值的转换，参见C++11新特性（一）std::forward用于实现完美转发的函数，直接将参数的类型传递到参数中，右值不会退化为左值std::threadthread是引入的线程库，用于创建线程，并发编程。std::to_string()to_string能够完......
  • C++11新特性（三）：语言特性
    C++11新特性范围for循环std::vector<int>nums;for(autoit:nums){cout<<*it<<endl;}array<5,int>a{1,2,3,4,5};for(autox:a){x*=2;//此时a中元素不会发生改变a{1,2,3,4,4}}for(auto&x:a){x*=2;//此时a中元素会发......
  • Java 12 新特性—Switch 表达式
    作者简介：大家好，我是smart哥，前中兴通讯、美团架构师，现某互联网公司CTO联系qq：184480602，加我进群，大家一起学习，一起进步，一起对抗互联网寒冬学习必须往深处挖，挖的越深，基础越扎实！阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析......
  • Java 12 新特性—新增 String API
    作者简介：大家好，我是smart哥，前中兴通讯、美团架构师，现某互联网公司CTO联系qq：184480602，加我进群，大家一起学习，一起进步，一起对抗互联网寒冬学习必须往深处挖，挖的越深，基础越扎实！阶段1、深入多线程阶段2、深入多线程设计模式阶段3、深入juc源码解析阶段4、深入jdk其余源码解析......
  • C++11新特性（二）：语言特性
    C++11新特性语言特性nullptr空指针nullptr空指针的使用可以规避掉以往设置为NULL的风险。NULL在编译器中常常被设置为0或者其它数字，此时判断指针是否为NULL，即判断指针类型是否能够等于整型值，并不安全。int*p=nullptr;强类型枚举强类型枚举不能隐式转换为int类型，可以指定......
  • Java小白一文带你回顾复习Java中的三大特性
    封装封装就是把抽象出的数据（属性）和对数据的操作（方法）封装在一起，数据被保护在内部，程序的其他部分只有通过被授权的操作（方法），才能对数据进行操作。实现步骤将属性进行私有化private提供一个公共的set方法，用于对属性判断并赋值publicvoidsetXXX(类型参数){ 属性=......
  • CSS3页面布局-三栏-固定宽度布局
    布局的基本概念多栏布局三种基本实现方案：固定宽度，流动，弹性。固定宽度布局：大小不会随用户调整浏览器窗口大小。一版960-1100,960常见，可以被3,4,5,6,8,10,12,16整除。流动布局：大小会随用户调整浏览器窗口大小而变化。可以更好适应大屏幕，也叫响应式。弹性布局：所有元素大小也......
  • C#------新特性之？？、？、？？= 使用
    publicstaticvoidMain(){List<int>?numbers=null;int?a=null;Console.WriteLine((numbersisnull));//true//如果numbers为空，则初始化numbers，同时添加一个5到numbers列表中(numbers??=newList<int>()).A......
  • C# 使用特性的方式封装报文
    在编写上位机软件时，需要经常处理命令拼接与其他设备进行通信，通常对不同的命令封装成不同的方法，扩展稍许麻烦。本次拟以特性方式实现，以兼顾维护性与扩展性。思想一种命令对应一个类，其类中的各个属性对应各个命令段，通过特性的方式，实现其在这包数据命令中的位置、大端或小端及......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99