CSS3新特性

您所在的位置：网站首页 › html和css3新特性 › CSS3新特性

CSS3新特性

2023-07-18 01:08| 来源: 网络整理| 查看: 265

新特性简介强大的 CSS3 选择器抛弃图片的视觉效果盒模型变化（多列布局和弹性盒模型）阴影效果 Web 字体和 Web Font 图标 CSS3 过渡与动画交互效果媒体查询

案例

github.com/Jennie-duo/…

如何查询浏览器市场份额？

tongji.baidu.com/research/

浏览器对CSS3的支持情况：

如何分辨属性是否需要添加浏览器前缀：caniuse.com/

渐进增强和优雅降级

渐进增强：先满足大部分浏览器，发布产品后再慢慢地改进每个浏览器的效果，让每个浏览器使用 CSS3 。优雅降级：先满足大部分用户，先改进用户量最多的浏览器，上线后再挨个满足各个浏览器，进行一定的改变以下以 Chrome 浏览器为主，采用优雅降级的方式第一章环境搭建打开 Chrome 官网下载 Chrome 浏览器在 Vscode 编辑器中安装前缀插件:Autoprefixer 伪类选择器

什么是伪类选择器？

不存在于 HTML 中，但是我们用 CSS 的巧妙语法能够选择它们，并对它们进行渲染修饰

动态伪类选择器不存在于 HTML 中，只有我们动态交互的时候,才能使用 CSS 动态伪类选择器，给它们进行样式的渲染。使用最多的是 a 标签，例如 hover、visited、active、link。 UI 元素状态伪类选择器重点是状态两个字，我们在写 HTML 的时候，在一些标签里面是有状态的。例如：文本框 input type="text",有 enabled 和 disabled 两种状态。结构伪类选择器（ CSS3 新增内容）结构伪类选择器的出现大大简化了 HTML 的文本结构，让 HTML 更语义化、更结构化，减少了 class 和 id 的使用，利用我们新增加的这些选择器就能很好的选择重复的标签。 :first-child 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素； :nth-child() 选择某个元素的一个或多个特定的子元素；隔行换色使用 2n 或 2n+1 参数。另：odd 代表奇数行，even 代表偶数行。选择第 n 个元素后的所有元素，使用 n+5 参数。每隔 n 行变色使用（n+1）n +1 参数，n 相当于一个循环。 :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； :nth-of-type() 选择指定的元素；和 nth-child 用法类似，但是限定了元素类型。 :nth-last-of-type() 选择指定的元素从元素的最后一个开始计算； :first-of-type 选择一个上级元素下的第一个同类子元素； :last-of-type 选择一个上级元素的最后一个同类子元素； :only-child 选择的元素是它的父元素的唯一一个子元素； :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素； :empty 选择的元素里面没有任何内容。

生成列表快捷键：ul>li*10>a

伪元素什么是伪元素？

CSS 伪元素用于向某些选择器设置特殊效果。

伪元素作用IEFNW3C::first-letter将特殊的样式添加到文本的首字母5181::first-line将特殊的样式添加到文本的首行5181::before在某元素之前插入某些内容1.582::after在某元素之后插入某些内容1.582

CSS3 之后，为了区别伪类选择器和伪元素，在伪元素前加两个 ::

::before 和 ::after 相当于在 element 和 content 之间多了两个图层，改善了 CSS 布局能力的不足,且 ::before 和 ::after 属性中必须有 'content:' 属性，content 属性可以为空 ''

第二章 CSS3 的变形用 border-radius 画圆形

Border-radius 的优点：

减少网站的维护工作量提高网站性能增加了视觉美观性 border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-top-left-radius: 100px 50px;// x轴 y轴 border-radius:100px 100px 0px 0px;//左上角开始顺时针方向复制代码画多边形画三角形和对话效果

用::before 伪元素画一个三角形，然后用相对定位把三角形放在对话框的左边

border-top: 10px solid transparent; border-left: 0px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #6a6; 复制代码用 Transform 画菱形和平行四边形

Transform 是 2D 或 3D 的变形转换，它允许我们对元素进行四种变化

--- 旋转、缩放、移动和倾斜。

transform在浏览器中的兼容性并不高，需要添加前缀

菱形：正方形旋转

.Diamond{ width: 200px; height: 200px; background-color: #6a6; margin: 100px auto; -webkit-transform: rotate(45deg);//旋转 -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } 复制代码

平行四边形：正方形倾斜

.parallel{ width: 200px; height: 100px; background-color: #6a6; margin: 100px auto; -webkit-transform: skew(0deg,20deg);//倾斜（x轴，y轴） -moz-transform: skew(0deg,20deg); -ms-transform: skew(0deg,20deg); -o-transform: skew(0deg,20deg); transform: skew(0deg,20deg); } 复制代码画五边形和六边形

五边形：将三角形和梯形拼接起来

#test{ width: 50px; height: 50px; border-top: 50px solid #f00; border-left: 50px solid #0f0; border-right: 50px solid #ff0; border-bottom: 50px solid #00f; } #trapezoid{ margin: 100px auto; width: 54px; height: 0px; border-top: 50px solid red; border-left: 18px solid transparent; border-right: 18px solid transparent; position: relative; } #trapezoid::after{ content: ''; width: 0px; height: 0px; border-left: 45px solid transparent; border-right: 45px solid transparent; border-bottom: 35px solid red; position: absolute; top: -85px; left: -18px; } 复制代码

六边形：将长方形上下各拼接一个三角形

#hexagon{ margin: 100px auto; width: 100px; height: 55px; background-color: red; position: relative; } #hexagon::before{ content: ''; position: absolute; width: 0px; height: 0px; border-bottom: 25px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; top: -25px; } #hexagon::after{ content: ''; position: absolute; width: 0px; height: 0px; border-top: 25px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; top: 55px; } 复制代码星形

五角星：用伪元素画两个三角形并与第一个三角形旋转组合

#star{ width: 0px; height: 0px; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 70px solid red; margin: 150px auto; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); position: relative; } #star::before{ content: ''; width: 0px; height: 0px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 80px solid red; position: absolute; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); transform: rotate(-35deg); top: -45px; left: -65px; } #star::after{ content: ''; width: 0px; height: 0px; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 70px solid red; position: absolute; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); transform: rotate(-70deg); top: -3px; left: -105px; } 复制代码

六角星：画两个相反方向的三角形并重叠在一起

#sexangle{ width: 0px; height: 0px; border-bottom: 100px solid red; border-left: 60px solid transparent; border-right: 60px solid transparent; margin: 150px auto; position: relative; } #sexangle::before{ content: ''; width: 0px; height: 0px; border-top: 100px solid red; border-left: 60px solid transparent; border-right: 60px solid transparent; position: absolute; top: 35px; left: -60px; } 复制代码曲形

心型：画两个上边半圆的矩形并旋转重叠在一起

#cardioid{ margin: 100px auto; height: 90px; width: 56px; background-color: red; border-radius: 28px 28px 0 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: relative; } #cardioid::after{ content: ''; height: 90px; width: 56px; background-color: red; border-radius: 28px 28px 0 0 ; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); position: absolute; left: 55px; } 复制代码

蛋型：画一个长方形分别设置border-radius

#egg{ width: 126px; height: 180px; background-color: #fa3; margin: 100px auto; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;//四个角的x轴/四个角的y轴 } 复制代码

太极阴阳图：将黑底白框的圆和白底黑框的边组合到一个黑白的圆上

#taiji{ width: 150px; height: 300px; margin: 100px auto; border-radius: 50%; background-color: white; border-left: 150px solid black; position: relative; } #taiji::after{ content: ''; position: absolute; width: 0; height: 0; padding: 25px; border-radius: 50%; border: 50px solid black; background-color: white; left: -75px; } #taiji::before{ content: ''; position: absolute; width: 0; height: 0; padding: 25px; border-radius: 50%; border: 50px solid white; background-color: black; top: 150px; left: -75px; } 复制代码第三章 CSS3 的颜色透明属性

制作透明背景层

opacity:value(0-1)|inherit(继承)

#background{ margin: 100px auto; width: 900px; height: 600px; background-image: url(./img/background.jpeg); position: relative; } #content{ position: absolute; width: 600px; height: 300px; background-color: #fff; opacity: 0.8; top: 150px; left: 150px; border-radius: 20px; padding: 20px; text-align: center; -webkit-box-shadow: 3px 3px 5px #888; //x轴阴影 y轴阴影阴影的宽度阴影颜色 box-shadow: 3px 3px 5px #888; } 复制代码

opacity属性兼容性较好，只有 IE 的几个版本部分支持，其余浏览器均支持，可不加浏览器前缀

颜色模式

rgba(R,G,B,A)

R:红色值。正整数|百分数 G:绿色值。正整数|百分数 B:蓝色值。正整数|百分数 A:Alpha透明度。取值 0～1 之间

rgba 不会影响文本的颜色，这是符合实际需要的。opacity 更适用于背景透明。 hsla(H,S,L,A)

H:Hue(色调)。0(或360)表示红色，120 表示绿色，240 表示蓝色，也可取其他数值来指定颜色。取值为: 0 - 360 S: Saturation(饱和度)。取值为: 0.0% - 100.0% L: Lightness(亮度)。取值为: 0.0% - 100.0% A:Alpha透明度。取值 0～1 之间渐变线性渐变

linear-gradient([ || ,]?,[,]*)

:用角度值指定渐变的方向（或角度）。

to left:设置渐变为从右到左。相当于: 270deg

to right:设置渐变为从左到右。相当于: 90deg

to top:设置渐变为从下到上。相当于: 0deg

to bottom:设置渐变为从上到下。相当于: 180deg

: 用于指定渐变的起止颜色

: 指定颜色

: 用长度值指定起止色位置。不允许负值

: 用百分比指定起止色位置。

渐变属性只能放在 background-image 下面。IE9 以前的版本不支持

.demo{ width: 260px; height: 200px; border: 1px solid black; background-image: -webkit-linear-gradient(270deg,orange 30%,green 60%,red 100%); background-image: -o-linear-gradient(270deg,orange 30%,green 60%,red 100%); background-image: linear-gradient(270deg,orange 30%,green 60%,red 100%); background-image: linear-gradient(to left,orange 100px,green 160px,red 260px); } 复制代码径向渐变

radial-gradient([ || ,]?[ || ,]? ,[,]*);

.demo{ width: 100px; height: 100px; border: 1px solid black; border-radius: 50%; margin: 10px; float: left; } .circle{ background-image: radial-gradient(20px circle at center,orange,green,red); } .ellipse{ background-image: radial-gradient(20px 30px ellipse at center,orange,green,red); } 复制代码重复性渐变

添加 repeating 和色标值即可:

.linear{ width: 300px; height: 300px; margin: 20px auto; background-image: repeating-linear-gradient(red 0px,green 40px,orange 80px); } .circle{ width: 300px; height: 300px; margin: 20px auto; border-radius: 50%; background-image: repeating-radial-gradient(red 0px,green 30px,orange 40px); } 复制代码盒子阴影效果 text-shadow box-shadow box-shadow:h-shadow v-shadow blur spread color inset;

box-shadow: 2px 2px 10px #aaa;

h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 css 颜色值。 inset 可选。将外部阴影（outset）改为内部阴影。

box-shadow 浏览器兼容性不高，需要写前缀。

第四章 CSS3 的过渡属性 Transition transition-property:过渡属性(默认值为all) transition-duration:过渡持续时间(默认值为0s) transition-timiing-function:过渡函数(默认值为ease函数) transition-delay:过渡延迟时间(默认值为0s)

过渡属性浏览器支持度不高，还是要谨慎使用的。

.demo{ width: 100px; height: 100px; background-color: pink; cursor: pointer; transition-duration: 2s; transition-property: all; transition-delay: .2s; transition-timing-function: ease; // transition: all 2s .2s ease; } .demo:hover{ width: 300px; height: 200px; background-color: aquamarine; border-radius: 40px; } 复制代码过渡函数 ease:-慢-快-慢- linear:匀速 ease-in:先慢后快 ease-out:先快后慢 ease-in-out:-慢-快-慢- step-start: 一步到位 step-end: 最后时间一步到位

要求更高时可采用贝塞尔曲线: cubic-bezier.com

简单的过度动画 .m_img img{ width: 140px; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .main li:hover .m_img img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 复制代码

过渡效果 transition 加在需要过渡的元素上

第五章 CSS3 的动画动画中的关键帧 @keyframes .rect{ width: 100px; height: 100px; background-color: red; position: fixed; animation: mymove 3s infinite ; } @keyframes mymove{ //from { top: 0; left: 20%;} //to { top: 0; left: 80%;} 0% { top: 20%; left: 20%; background-color: red;} 25% { top: 20%; left: 80%; background-color: aqua;} 50% { top: 80%; left: 80%; background-color: aquamarine;} 75% { top: 80%; left: 20%; background-color: blueviolet;} 100% { top: 20%; left: 20%; background-color: brown;} } 复制代码 animation 复合属性

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

animation-name: 要使用的动画名字 animation-duration: 动画执行持续时间 animation-timing-function: 动画过渡函数 animation-delay: 动画延迟执行时间 animation-iteration-count: 动画循环次数有 infinite 参数无限循环 animation-direction: 动画播放方向有 normal 和 alternate 参数 animation-name: mymove; animation-duration: 3s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: alternate; //animation: mymove 3s ease 1s infinite alternate; 复制代码

浏览器支持度仅有 79%，需要写浏览器前缀。

制作复杂的 CSS 动画栅栏状 loading 动画效果实现

设置动画关键帧后依次延迟不同元素的动画执行时间

.spinner{ margin: 100px auto; width: 60px; height: 60px; text-align: center; font-size: 10px; } .spinner > div{ background-color: #67cf22; height: 100%; width: 6px; display: inline-block; animation: loading 1.2s infinite ease; } .spinner > div:nth-child(2){ animation-delay: -1.1s; } .spinner > div:nth-child(3){ animation-delay: -1.0s; } .spinner > div:nth-child(4){ animation-delay: -0.9s; } .spinner > div:nth-child(5){ animation-delay: -0.8s; } @keyframes loading{ 0%,40%,100%{transform: scaleY(0.4);} 20%{transform: scaleY(1);} } 复制代码水滴状 loading 动画效果实现 .spinner{ width: 60px; height: 60px; position: relative; margin: 100px auto; } .spinner > div{ width: 100%; height: 100%; border-radius: 50%; background-color: #67cf22; opacity: 0.6; position: absolute; top: 0px; left: 0px; animation: loading 2.0s infinite ease-in-out; } .spinner > div:nth-child(2){ animation-delay: -1s; } @keyframes loading{ 0%,100%{transform: scale(0.0);} 50%{transform: scale(1.0);} } 复制代码

动画延迟时间尽量用负延迟，刷新页面时动画提前执行，动画不会停顿

第六章文字排版的一些新特性 text-shadow

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

h-shadow: x 轴阴影位置 v-shadow: y 轴阴影位置 blur: 阴影模糊距离，即阴影的大小 color: 阴影颜色 body{ background-color: #666; text-align: center; font: bold 55px "Microsoft YaHei"; } .font1{ color: #fff; text-shadow: 0px 0px 20px red; } .font2{ color: #000; text-shadow: 0px 1px 1px #fff; } .font3{ color: #fff; text-shadow: 1px 1px rgba( 197 , 223 , 248 , 0.8), 2px 2px rgba( 197 , 223 , 248 , 0.8), 3px 3px rgba( 197 , 223 , 248 , 0.8), 4px 4px rgba( 197 , 223 , 248 , 0.8), 5px 5px rgba( 197 , 223 , 248 , 0.8), 6px 6px rgba( 197 , 223 , 248 , 0.8); } 复制代码

IE10 之前的版本不支持该属性

用 text-overflow 解决文字排版问题

text-overflow: clip|ellipsis|string;

clip: 需要配合overflow-hidden使用，没有明显效果，和单独使用overflow-hidden效果相同 ellipsis: 需要配合overflow-hidden和white-space:nowrap(换行）使用，高度变成一行并用 ... 表示未显示部分 string: 大部分浏览器不支持，不建议使用，也很少用到。 .demo{ margin: 30px auto; width: 100px; padding: 10px; border: 1px solid #ccc; height: 50px; text-overflow: clip; overflow: hidden; } .demo1{ margin: 0px auto; width: 100px; padding: 10px; border: 1px solid #ccc; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; /*自动换行*/ } 复制代码

浏览器支持度很高，仅需添加 -webkit- 前缀即可

新的字体单位 rem px: 像素单位，非常精准，只跟像素值有关，不跟终端有关。 em: 为了迎合各种终端的出现，相对于父层的字体来进行缩放。 rem: 随着 CSS3 的出现，增加了 rem，根据 html 的根字体单位进行换算。如何在不同终端进行字体变化？

和媒体选择器和弹性布局结合起来，根据不同的终端弹性布局，比如栅格化布局。

【本文地址】

公司简介

联系我们