css3新特性总览

原创 已于 2023-06-26 17:12:31 修改 · 824 阅读 · 13 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css3 #新特性
于 2020-04-07 15:36:46 首次发布
本文深入探讨CSS3的新增特性，包括复杂的选择器、边框、背景、文本效果、动画、多列布局、盒模型、弹性盒布局以及媒体查询等。通过详细示例，讲解如何运用这些新特性提升网页设计的灵活性和美观度。

css3新特性

css3选择器

选择器示例示例说明
.class.intro选择所有class="intro"的元素
#id#firstname选择所有id="firstname"的元素
**选择所有元素
elementp选择所有< p>元素
element,elementdiv,p选择所有< div>元素和 < p>元素
element elementdiv p选择< div>元素内的所有< p>元素
element>elementdiv>p选择所有父级是 < div> 元素的 < p> 元素
element+elementdiv+p选择所有紧接着< div>元素之后的< p>元素
[attribute][target]选择所有带有target属性元素
[attribute=value][target=-blank]选择所有使用target="-blank"的元素
[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素
[attribute``=language][lang `
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择活动链接
:hovera:hover选择鼠标在链接上面时
:focusinput:focus选择具有焦点的输入元素
:first-letterp:first-letter选择每一个< P>元素的第一个字母
:first-linep:first-line选择每一个< P>元素的第一行
:first-childp:first-child指定只有当< p>元素是其父级的第一个子级的样式。
:beforep:before在每个< p>元素之前插入内容
:afterp:after在每个< p>元素之后插入内容
:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有< p>元素
element1~element2p~ul选择p元素之后的每一个ul元素
[attribute^=value]a[src^=“https”]选择每一个src属性的值以"https"开头的元素
[attribute$=value]a[src$=“.pdf”]选择每一个src属性的值以".pdf"结尾的元素
[attribute*=value]a[src*=“44lan”]选择每一个src属性的值包含子字符串"44lan"的元素
:first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素
:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素
:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素
:only-childp:only-child选择每个p元素是其父级的唯一子元素
:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素
:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
:last-childp:last-child选择每个p元素是其父级的最后一个子级
:root:root选择文档的根元素
:emptyp:empty选择每个没有任何子级的p元素（包括文本节点）
:target#news:target选择当前活动的#news元素（包含该锚名称的点击的URL）
:enabledinput:enabled选择每一个已启用的输入元素
:disabledinput:disabled选择每一个禁用的输入元素
:checkedinput:checked选择每个选中的输入元素
:not(selector):not§选择每个并非p元素的元素
::selection::selection匹配元素中被用户选中或处于高亮状态的部分
:out-of-range:out-of-range匹配值在指定区间之外的input元素
:in-range:in-range匹配值在指定区间之内的input元素
:read-write:read-write用于匹配可读及可写的元素
:read-only:read-only用于匹配设置 “readonly”（只读） 属性的元素
:optional:optional用于匹配可选的输入元素
:required:required用于匹配设置了 “required” 属性的元素
:valid:valid用于匹配输入值为合法的元素
:invalid:invalid用于匹配输入值为非法的元素

CSS3 边框（Borders）

用CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序

属性说明
border-image设置所有边框图像的速记属性
border-radius一个用于设置所有四个边框- *-半径属性的速记属性
box-shadow附加一个或多个下拉框的阴影
div{			
	width:60px;
	color:greenyellow;
	border:10px solid;
	border-radius:25px;
	box-shadow: 10px 10px 5px #888888;
}

在这里插入图片描述

CSS3 背景

CSS3中包含几个新的背景属性，提供更大背景元素控制。

顺序描述
background-clip规定背景的绘制区域
background-origin规定背景图片的定位区域
background-size规定背景图片的尺寸
div
{
    height:300px;
	width:400px;
	background:url(2.jpg);
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-origin:content-box;
}

在这里插入图片描述

多背景

div
{
	height:300px;
	width:400px;
	background-color: aqua;
	background:url(1.jpg),url(2.jpg);
	//当第一张背景图片可以找到就显示第一张背景图片，如果实现则会显示第二张背景图片
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-origin:content-box;
			}

在这里插入图片描述
在这里插入图片描述

CSS3 渐变

CSS3 定义了两种类型的渐变（gradients）：

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
   background: linear-gradient(direction, color-stop1, color-stop2, ...);

示例：

div
	{
		height: 150px;
		width:200px;
		background-color: coral ;/* 不支持线性的时候显示 */
		background-image: linear-gradient(to bottom right, coral, greenyellow);
	}

在这里插入图片描述
使用角度

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

background-image: linear-gradient(angle, color-stop1, color-stop2);

使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

div
	{
		height: 150px;
		width:200px;
		background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
	}

在这里插入图片描述
重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

div
	{
		height: 150px;
		width:200px;
		background-color: burlywood; /* 浏览器不支持的时候显示 */
		background-image: repeating-linear-gradient(190deg,coral ,cornflowerblue 17%,burlywood 30%); 
	}

在这里插入图片描述

  • 径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, ..., last-color);

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

div
	{
		height: 150px;
		width:200px;
		background-image: radial-gradient(circle, mediumspringgreen, powderblue, greenyellow);
	}

在这里插入图片描述
不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
div
	{  
		height: 150px;
		width: 150px;
		color:mediumspringgreen;
		border:3px solid;
		background-color: red; /* 浏览器不支持的时候显示 */
		background-image: radial-gradient(closest-side at 60% 55%, red, yellow, white); 
	}

在这里插入图片描述
重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

div
	{  
		height: 150px;
		width: 150px;
		background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
	}

在这里插入图片描述

CSS3 文本效果

属性描述
hanging-punctuation规定标点字符是否位于线框之外
punctuation-trim规定是否对标点字符进行修剪
text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行
text-emphasis向元素的文本应用重点标记以及重点标记的前景色
text-justify规定当 text-align 设置为 “justify” 时所使用的对齐方法
text-outline规定文本的轮廓
text-overflow规定当文本溢出包含元素时发生的事情
text-shadow向文本添加阴影
text-wrap规定文本的换行规则
word-break规定非中日韩文本的换行规则
word-wrap允许对长的不可分割的单词进行分割并换行到下一行

CSS3 字体

以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。所选择的字体在新的CSS3版本有关于@font-face规则描述。"自己的"的字体是在 CSS3 @font-face 规则中定义的。

<style>
@font-face{
	font-family: Cx;
	src: url(../Font/Cx/Cx.ttf);
}
div
{
font-family:Cx;
}
</style>

在这里插入图片描述

css3动画

要创建CSS3动画，你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
@keyframes 规则和所有动画属性：

属性描述
@keyframes规定动画
animation所有动画属性的简写属性，除了 animation-play-state 属性
animation-name规定 @keyframes 动画的名称
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function规定动画的速度曲线。默认是 “ease”
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-delay规定动画何时开始。默认是 0
animation-iteration-count规定动画被播放的次数。默认是 1
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”
animation-play-state规定动画是否正在运行或暂停。默认是 “running”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>动画实例</title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	//方法一
	animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    //方法二
	animation:myfirst 5s linear 2s infinite alternate;
	/* Firefox: */
	-moz-animation:myfirst 5s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 5s linear 2s infinite alternate;
	/* Opera: */
	-o-animation:myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

CSS3 多列

CSS3 多列属性：

属性描述
column-count指定元素应该被分割的列数
column-fill指定如何填充列
column-gap指定列与列之间的间隙
column-rule-color指定两列间边框的颜色
column-rule-style指定两列间边框的样式
column-rule-width指定两列间边框的厚度
column-span指定元素要跨越多少列
column-width指定列的宽度
columns设置 column-width 和 column-count 的简写
column-rule所有 column-rule-* 属性的简写

CSS3 盒模型

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

  • resize：none | both | horizontal | vertical | inherit
  • box-sizing: content-box | border-box | inherit
  • outline:outline-color outline-style outline-width outine-offset

resize属性指定一个元素是否应该由用户去调整大小。

box-sizing 属性允许以确切的方式定义适应某个区域的具体内容。

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

CSS3伸缩布局盒模型(弹性盒)

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

下表列出了在弹性盒子中常用到的属性:

属性描述
display指定 HTML 元素盒子类型
flex-direction指定了弹性容器中子元素的排列方式
justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式
align-items设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
flex-wrap设置弹性盒子的子元素超出父容器时是否换行
align-content修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flowflex-direction 和 flex-wrap 的简写
order设置弹性盒子的子元素排列顺序
align-self在弹性子元素上使用。覆盖容器的 align-items 属性
flex设置弹性盒子的子元素如何分配空间

CSS3 多媒体查询

从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

使用媒体类型

 <link rel="stylesheet" type="text/css" href="site.css" media="screen" />
 <link rel="stylesheet" type="text/css" href="print.css" media="print" />

媒体查询规则

@media all and (min-width: 800px) { ... }

@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。

(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。

and 条件

 @media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

or 关键词

@media (min-width:800px) or (orientation:portrait) { ... }

使用 not

@media (not min-width:800px) { ... }

CSS 多媒体查询，适配各种设备尺寸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS 多媒体查询，适配各种设备尺寸</title>
		<style>
			.example {
			    padding: 20px;
			    color: white;
			}
			/* Extra small devices (phones, 600px and down) */
			@media only screen and (max-width: 600px) {
			    .example {background: red;}
			}
			
			/* Small devices (portrait tablets and large phones, 600px and up) */
			@media only screen and (min-width: 600px) {
			    .example {background: green;}
			}
			
			/* Medium devices (landscape tablets, 768px and up) */
			@media only screen and (min-width: 768px) {
			    .example {background: blue;}
			} 
			
			/* Large devices (laptops/desktops, 992px and up) */
			@media only screen and (min-width: 992px) {
			    .example {background: orange;}
			} 
			
			/* Extra large devices (large laptops and desktops, 1200px and up) */
			@media only screen and (min-width: 1200px) {
			    .example {background: pink;}
			}
		</style>
	</head>
	<body>
		<h2>响应式判断</h2>
		<p class="example">操作浏览器窗口，查看效果。</p>
	</body>
</html>

参考原文：https://www.cnblogs.com/star91/p/5659134.html

11.CSS3新增了哪些新特性？
kleinBlue.的博客
11-07 3226
一、是什么 css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的 CSS3也增加了很多新特性，为开发者带来了更佳的开发体验 从几个维度列举一些常见的特性，如下 二、选择器 css3中新增了一些选择器，主要为如下图所示： 三、新样式 边框 css3新增了三个边框属性，分别是： border-radius：创建圆...
CSS3的新特性
weixin_45086164的博客
03-23 3049
CSS3的新特性
CSS3全面详解：新增特性+实战示例，前端必学指南
最新发布
wulechun的博客
05-11 766
CSS3核心特性摘要 CSS3作为CSS的重大升级，通过模块化开发模式新增了多项实用特性，显著提升了前端开发效率和网页表现力。本文精选8大核心特性。
【css】CSS3有哪些新特性
热门推荐
t13965688123的博客
05-07 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言1、css3边框——圆角效果 border-radius2、css3边框——阴影 box-shadow3、css3边框——边框图片 border-image4、css3颜色——颜色之RGBA5、css3颜色——渐变色彩 liner-gradient线性渐变6、CSS3文字与字体——text-overflow与word-wrap7、CSS3文字与字体——@font-face 字体8、CSS3文字与字体——文本的阴影 text-s.
CSS3新特性
太阳与星辰的博客
03-23 1285
CSS3新特性
day7小结
KanaseKanon的博客
09-24 973
1、CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。 2、CSS3的主要新特性： 1）选择器 2）阴影 3）形状转换（2D<->3D） 4）变形 5）动画（过渡动画、帧动画） 6）边框 7）多重背景 8）反射 9）文字 10）颜色（rgba/hsl/hsla） 11）滤镜（filter） 12）弹性布局 13）多列布局 14）盒模型 15）Web字体 16）媒体查询 3、CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。 1）主流浏览器内
CSS3 新特性概述
kwame211的博客
11-28 7165
CSS3的新特性大致分为以下六类 1.CSS3选择器2.CSS3边框与圆角3.CSS3背景与渐变4.CSS3过渡5.CSS3变换6.CSS3动画下面分别说一说以上六类都有哪些内容 CSS3选择器 1.基本选择器 基本选择器又分为 子选择器 相邻兄弟选择器 通用兄弟选择器 群组选择器 2.属性选择器 1.element[attribute] 为带有attribute属性的元素设置样式 2.element[attribute='value'] 为attribute='value'属性的元素设...
CSS3有哪些新特性
admin_zlj的博客
03-20 1万+
CSS3的新特性 1.CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。 2.CSS3的主要新特性： 1）选择器 2）阴影 3）形状转换（2D <-> 3D） 4）变形 5）动画（过渡动画、帧动画） 6）边框 7）多重背景 8）反射 9）文字 10）颜色函数（rgba/hsl/hsla） 11）滤镜（filter） 12）弹性布局 13）多列布局 14）栅格布局 15）盒模型 16）Web字体 17）媒体查询 3.CSS3不是属于浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通
CSS3新增特性
m0_47743942的博客
03-25 1751
对css3新增特性进行简介，主要包括：新增长度单位、新增颜色设置方式、新增选择器、新增盒子属性、新增背景属性、新增边框属性、新增文本属性、新增渐变（本质背景图片）、新增字体、2D变换、3D变换、过渡、动画、过渡和动画对比、多列布局、伸缩盒模型、响应式布局、BFC、前端学习，并在最后补充了绝对定位元素的位置
CSS3新特性——概述、私有前缀、盒子模型、背景、边框、渐变色
Hdhhdhbsjxbdhvyg的博客
11-13 1468
在C2的基础上，增加了许多强大的新功能，从而解决一些实际面临的问题；C3未来会按照模块化的方式去发展（分为文本、盒子、2D、3D、、）。
CSS3 新特性详解
My_wife_QBL的博客
07-09 1351
CSS3 带来了许多新特性和改进，涵盖了布局、动画、变形、背景和边框、文本效果等多个方面。媒体查询（Media Queries）弹性盒子布局（Flexbox）网格布局（Grid Layout）动画（Animations）和过渡（Transitions）变形（Transforms）盒阴影（Box Shadow）和文本阴影（Text Shadow）渐变（Gradients）自定义字体（Web Fonts）多重背景（Multiple Backgrounds）
CSS3新特性汇总
qq_44741577的博客
02-24 1839
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
前端面试CSS
lucky_jiexia的博客
03-26 2089
1、CSS 的盒子模型 IE 盒子模型、W3C 盒子模型 IE 的 content 部分把 border 和 padding 计算了进去 2、行内元素（内联元素）和块级元素 3、link和import区别？ （1）link 属于 XHTML 标签，而@import 是 CSS 提供的； （2）页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载； （3）import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容问题； ..
css3新特性
weixin_44992737的博客
06-19 5255
css3新特性详解
CSS3 新特性
猫老板的豆
04-17 1671
CSS3中引入了许多令人兴奋的新特性，这些特性使得开发者能够创建更丰富、更动态和更响应式的网页。
CSS3新增了哪些新特性？
常来常往，共同成长
03-13 2092
css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观 css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的 而CSS3也增加了很多新特性，为开发带来了更佳的开发体验
CSS3的新增特性
qq_43474235的博客
08-28 173
CSS3的新增特性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值