CSS3新特性攻略

最新推荐文章于 2024-03-13 08:00:00 发布
最新推荐文章于 2024-03-13 08:00:00 发布
阅读量115 收藏
点赞数
分类专栏： html CSS 效果图 文章标签： css3 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69821704/article/details/128734366
版权
html 同时被 3 个专栏收录
35 篇文章 0 订阅
订阅专栏
CSS
18 篇文章 0 订阅
订阅专栏
效果图
2 篇文章 0 订阅
订阅专栏

一、CSS3新特性_圆角（border-radius）

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"

border-radius 属性，可以使用以下规则：

  1. 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
  2. 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  3. 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  4. 一个值： 四个圆角值相同

 注意：

        当border-radius:50%; 的时候，正方形变成圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 20px;
            float: left;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 10px 20px 30px 40px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 10px 20px 40px;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 20px 40px;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 20px;
        }
        /* 当border-radius:50%; 的时候，正方形变成圆 */
        .box5{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
    <div class="box5">box5</div>
</body>
</html>

二、CSS3新特性_阴影

阴影分类：盒阴影（box-shadow）和字阴影（text-shadow）

盒阴影

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

box-shadow:10px 10px 5px 5px red;

inset：用在盒内阴影上

值描述
h-shadow必选，水平阴影的位置
v-shadow必选，垂直阴影的位置
blur可选，模糊距离
spread可选，阴影的尺寸
color可选，阴影的颜色
inset可选，外部引用修改为内部阴影

字阴影

 text-shadow: h-shadow v-shadow blur color;

 text-shadow:10px 10px 5px green;

值描述
h-shadow必选，水平阴影的位置
v-shadow必选，垂直阴影的位置
blur可选，模糊距离
color可选，阴影的颜色


 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            margin: 0 auto;
            overflow: hidden;
            clear: both;
        }
        div{
            margin: 30px;
            float: left;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            box-shadow: 10px 10px 10px 3px #c00;

        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            box-shadow: 0px 0px 5px grey;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            box-shadow: 0px 10px 10px yellow;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: pink;
            box-shadow: 10px 0px 5px violet;
        }
        .box5{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            box-shadow: 0px 0px 10px 10px green inset;
        }
        h1{
           font-size: 40px; 
           text-shadow: 10px 10px  5px rgba(0,0,0,0.5);
        }
        p{
            font-size: 40px;
            text-shadow: 10px 10px 5px #c00;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">两个方向阴影</div>
        <div class="box2">四个方向阴影</div>
        <div class="box3">三个方向阴影</div>
        <div class="box4">三个方向阴影</div>
        <div class="box5">盒内阴影</div>
    </div>
    <h1>杜恒中-duhengzhong</h1>
    <p>尚学堂-itbaizhan</p>
</body>
</html>

三、CSS3新特性_背景渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

为了创建一个渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

background: linear-gradient(direction,color-stop1,color-stop2, ...);

默认情况：从上到下过渡
第一种：background:linear-gradient(to right,red,green);

第二种：background:lineargradient(135deg,red,orange);

使用角度：（单位deg）

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            margin: 0 auto;
            overflow: hidden;
            clear: both;
        }
        div{
            margin: 20px;
            float: left;
        }
        .box1{
            width: 100px;
            height: 100px;
            background: linear-gradient(red,green);
        }
        .box2{
            width: 100px;
            height: 100px;
            background: linear-gradient(to right,red,green);
        }
        .box3{
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg,pink,yellow);
        }
        .box4{
            width: 100px;
            height: 100px;
            background: linear-gradient(-135deg,greenyellow,orange);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</body>
</html>

四、CSS3新特性_转换

transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

值描述
translate(x,y)定义移动

 移动：transform:translate(200px,100px);

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

值描述
rotate(angle)定义旋转，在参数中规定角度

 旋转：transform: rotate(45deg)

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

值描述
scale(x,y)定义缩放转换

缩放：transfrom:scale(1.5,1.5) 

skew()方法，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

值描述
skew(x,y)定义倾斜

 倾斜：transform:skew(10deg,10deg)

3D转换（不常用）

CSS3 允许您使用 3D 转换来对元素进行格式化

  1. rotateX()
  2. rotateY()

rotateX方法

rotateX()方法，围绕其在一个给定度数X轴旋转的元素

.box {
  width: 100px;
  height: 80px;
  background-color: rgba(255, 0, 0, .8);
  transform: rotateX(120deg);
}

rotateY方法

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素

.box {
  width: 100px;
  height: 80px;
  background-color: rgba(255, 0, 0, .8);
  transform: rotateY(120deg);
}

 转换用的最多的页面效果就是鼠标悬停有向上或者向下的效果

   transform:translate3d(0,-2px,0)：鼠标悬停，向上移动2px

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .container{
            margin: 0 auto;
        }
        div{
            margin: 20px;
            float: left;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 移动：transform:translate(200px,100px); */
            transform: translate(50px,100px);
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 旋转：transform: rotate(45deg) */
            transform: rotate(45deg);
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            /* 缩放：transfrom:scale(1.5,1.5) */
            transform: scale(1.5,1.5);
            font-size: 40px;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 倾斜：transform:skew(10deg,10deg) */
            transform: skew(10deg,10deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">移动</div>
        <div class="box2">旋转</div>
        <div class="box3">缩放</div>
        <div class="box4">倾斜</div>
    </div>
</body>
</html>

五、CSS3新特性_过渡（transition）

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果

使用：

transition:all .2s ease; 

值描述
transition简写属性，用于在一个属性中设置四个过渡属性
transition-property过渡属性：all|transition-property
transition-duration定义过渡效果花费的时间，默认是0
transition-timing-function过渡效果的时间曲线：ease|ease-in|ease-out|ease-in-out
transition-delay规定过渡效果何时开始，默认是0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 327px;
            height: 250px;
            background-color: #8ac007;
            transition: all .2s ease;
        }
        .box:hover{
            box-shadow: 0px 1px 5px 1px orange;
            transform: translate3d(0,-2px,0);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

六、CSS3新特性_动画（animation）

动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%

0% 是动画的开始，100% 是动画的完成。

@keyframes创建动画

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

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

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

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

animation执行动画

box{

        animation: name duration timing-function delay iteration-count direction;
        animation：breath 1s linear infinite alternate;

}

值描述
name设置动画的名称
duration设置动画的持续时间
timing-function设置动画效果的速率（如下）
delay设置动画的开始时间（延时执行）
iteration-count设置动画循环的次数，infinite为无限次数的循环
direction设置动画播放的方向（如下）
animation-play-state控制动画的播放状态：running代表播放，而paused代表停止播放
timing-function值描述
ease逐渐变慢（默认）
linear匀速
ease-in加速
ease-out减速
ease-in-out先加速后减速
direction值描述
normal默认值为normal表示向前播放
alternate动画播放在第偶数次向前播放，第奇数次向反方向播放

使用动画实现跑马灯的效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 800px;
            height: 200px;
            margin: 40px auto;
            overflow: hidden;
            clear: both;
        }
        
        .box1{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            border-radius: 50%;
            float: left;
            margin-right: 30px;
            animation: breath 1s linear infinite alternate;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: coral;
            border-radius: 50%;
            float: left;
            margin-right: 30px;
            animation: breath 1s linear infinite alternate;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 50%;
            float: left;
            margin-right: 30px;
            animation: breath 1s linear infinite alternate;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 50%;
            float: left;
            margin-right: 30px;
            animation: breath 1s linear infinite alternate;
        }
        .box5{
            width: 100px;
            height: 100px;
            background-color: #cccc89;
            border-radius: 50%;
            float: left;
            margin-right: 30px;
            animation: breath 1s linear infinite alternate;
        }

        @keyframes breath {
            10%{
                box-shadow: 0px 0px 10px 10px violet;
            }
            20%{
                box-shadow: 0px 0px 10px 10px greenyellow;
            }
            30%{
                box-shadow: 0px 0px 10px 10px green;
            }
            40%{
                box-shadow: 0px 0px 10px 10px orange;
            }
            50%{
                box-shadow: 0px 0px 10px 10px pink;
            }
            60%{
                box-shadow: 0px 0px 10px 10px red;
            }
            70%{
                box-shadow: 0px 0px 10px 10px blue;
            }
            80%{
                box-shadow: 0px 0px 10px 10px yellow;
            }
            90%{
                box-shadow: 0px 0px 10px 10px fuchsia;
            }
            99%{
                box-shadow: 0px 0px 10px 10px darkorchid;
            }
            
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
    </div>
</body>
</html>

 七、绘制特殊图形

绘制三角形（宽度和高度为零，绘制向右的箭头，给left加属性，transparent是透明的意思）

.box {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid blue;
}

绘制梯形（高度为0，设置宽度）

.box {
  width: 100px;
  height: 0;
  border-bottom: 80px solid red;
  border-left: 50px solid green;
  border-right: 50px solid yellow;
}

 

༨Rꫀꪖᦔᵧₒᵤ11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3新特性
qq_43276642的博客
05-20 3124
1.选择器： 伪元素选择器 ::before ::after ::first-line ::first-letter ::section 伪类选择器 .list>li:first-child 选中第一个子元素 .list>li:last-child 选中最后一个子元素 .list>li:nth-child(n) 选中第五个子元素 .list>li:nth-child(odd) 选中偶数行 .list>li:nth-child(...
深入了解CSS3新特性
07-22
资源名称：深入了解 CSS3 新特性资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
CSS3 新特性
开源 共享 学习
08-08 647
CSS3 是最新的 CSS 标准，并且完全向后兼容，不过目前W3C 仍然在对 CSS3 规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只控制样式的定义，让之前很难处理的样式（如：圆角、多列等）和只能通过Javascript来实现的动画效果等现在都能通过CSS3 新特性提供的属性很轻松的实现，功能是越来越强
CSS3新增了哪些新特性？
最新发布
常来常往，共同成长
03-13 1745
css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观 css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的 而CSS3也增加了很多新特性，为开发带来了更佳的开发体验
CSS3 的新特性
向往的那片海洋
01-25 179
在 CSS3 中大致有以下几种新特性： 新的特性： 渐变：gradients 过渡：transitions 动画：animations 新的布局方式： multi-colimns flexble box grid layouts 在 CSS3 中包含的几部分：渐变、变形、过度、动画、布局 人类在 21 世纪面临的最大挑战就是 “自我管理” ，学会自我管理首先要明白 “我是谁”。…而最重要也是最难的是 “认识你自己”。
CSS3的新特性
一只小白657的博客
10-31 570
CSS3的新特性1.CSS3的现状2.CSS3新增选择器2.1属性选择器2.2结构伪类选择器2.3伪元素选择器（重点） 1.CSS3的现状 新增的CSS3特性有兼容性问题 移动端支持优于PC端 不断改进中 应用相对广泛 现阶段主要学习：新增选择器和盒子模型以及其他特性 2.CSS3新增选择器 CSS3新增了选择器，可以更加便捷、自由的选择目标元素 属性选择器 结构伪类选择器 伪元素选择器 2.1属性选择器 属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类选择器或者id选择器 &lt
css3新特性.png
03-17
CSS3新特性，带你一小时学完CSS3
1.07 css3新特性
10-07
1.07 css3新特性
css3的新特性
liuhongboke的博客
04-25 70
css圆角属性：border-radius css阴影：Shadow css3渐变效果 background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E)); 这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。 css弹性盒子模型 多列布局：multi-column layout 动画特效：Animation transfrom：用来向元素应用各种2D和3D转换，
H5 和 CSS3 新特性
weixin_30918415的博客
10-12 167
博客地址：https://ainyi.com/52 H5 新特性 语义化标签：header、footer、section、nav、aside、article 增强型表单：input 的多个 type 新增表单元素：datalist、keygen、output 新增表单属性：placehoder、required、min 和 max 音频视频：audio、video ca...
html5 css3新特性
08-22
HTML5和CSS3带来了许多令人兴奋的新特性。下面是其中一些主要的特性： HTML5： 1. 语义化标签：HTML5引入了一些新的语义化标签，如、、和，使得代码更加清晰易懂。 2. 媒体元素：新增的和标签可直接在网页中嵌入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值