CSS3新特性汇总

最新推荐文章于 2023-03-25 20:11:22 发布
最新推荐文章于 2023-03-25 20:11:22 发布
阅读量1.6k 收藏 35
点赞数 6
分类专栏： CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31947477/article/details/106171063
版权

文章目录

CSS3介绍

CSS3是CSS的升级版本，于2001年5月23日完成工作草案。CSS3集成了CSS2.1的部分内容，并在其基础上进行了很多增补和修订。同时CSS3也完全向后兼容。

CSS3与CSS1和CSS2.1不同的是，CSS1和CSS2.1都是单一的规范， 其中 CSS1 主要定义了网页对象的基本样式，如字体、颜色、背景、边框等，CSS2 添加了高级概念，如浮动、定位、高级选择器（如子选择器、相邻选择器和通用选择器等）。而CSS3被拆分成多个模块，每个模块都有自己的规范，这样保证发布时各个模块之间不相互影响。

一些重要的CSS3模块如下：

  1. 选择器
  2. 盒模型
  3. 背景和边框
  4. 文字特效
  5. 2D/3D转换
  6. 动画
  7. 多列布局
  8. 用户界面

CSS3选择器

选择器.png

基本选择器

选择器类型例子例子描述CSS
*通配选择器*选择文档中所有html元素2
element元素选择器p选择所有

元素

1
#idID选择器#aa选择id='aa’的元素1
.class类选择器.bb选择class='bb’的所有元素1
elem1,elem2群组选择器div,p选择所有div和p元素1

层次选择器

选择器类型例子例子描述CSS
E F后代选择器div p选择div元素内的所有p元素1
E>F子选择器div>p选择父元素为div的所有p元素2
E+F相邻兄弟选择器div+p选择紧接在div元素之后的所有p元素2
E~F通用选择器p~ul选择前面有p元素的每个ul元素3

伪类选择器

动态伪类选择器

选择器类型例子例子描述CSS
E:link链接伪类选择器a:link选择所有未被访问的链接1
E:visited链接伪类选择器a:visited选择所有已被访问的链接1
E:active用户行为选择器a:active选择活动链接1
E:hover用户行为选择器a:hover选择鼠标指针位于其上的链接1
E:focus用户行为选择器input:focus选择获得焦点的 input 元素2

目标伪类选择器

选择器类型例子例子描述CSS
E:target#news:target选择当前活动的 #news 元素3
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        a{
            display:block;
            width:100px;
            height:50px;
            background:red;
            text-align: center;
            text-decoration: none;
            margin:10px auto;
        }
        div{
            width:200px;
            height:100px;
            margin:10px auto;
            text-align: center;
            font-size:60px;
            font-weight: 900;
        }
        div:target{
            /* 当div被锚点连接指向：css背景发生变化 */
            background:green;
        }
    </style>
</head>
<body>
<a href="#box1">连接div1</a>
<a href="#box2">连接div2</a>
<div id="box1">1</div>
<div id="box2">2</div>
</body>
</html>

GIF.gif

UI元素状态伪类选择器

选择器类型例子例子描述CSS
E:checked选中状态伪类选择器input:checked选择每个被选中的 input元素3
E:enabled启用状态伪类选择器input:enabled选择每个启用的input元素3
E:disabled不可用状态伪类选择器input:disabled选择每个禁用的input元素3

结构伪类选择器

选择器类型例子例子描述CSS
E:first-childp:first-child选择属于父元素的第一个子元素的每个 p 元素2
E:last-childp:last-child选择属于其父元素的最后一个子元素每个

元素

3
E:root:root选择文档的根元素(html元素)3
E F:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个

元素

3
E F:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数3
E:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个

元素的每个

元素

3
E:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数3
E:first-of-typep:first-of-type选择属于其父元素的首个

元素的每个

元素

3
E:last-of-typep:last-of-type选择属于其父元素的最后

元素的每个

元素

3
E:only-childp:only-child选择属于其父元素的唯一子元素的每个

元素

3
E:only-of-typep:only-of-type选择属于其父元素唯一的

元素的每个

元素

3
E:emptyp:empty选择没有子元素的每个

元素（包括文本节点）

3

否定伪类选择器

选择器类型例子例子描述CSS
E:not(F):not§选择非

元素的每个元素

3

属性选择器

选择器例子例子描述CSS
[attribute]a[target]选择带有 target 属性所有元素2
[attribute=value]a[target=_blank]选择 target="_blank" 的所有元素2
[attribute~=value]a[title~=flower]选择 title 属性包含单词 “flower” 的所有元素2
[attribute|=value]a[lang|=en]选择 lang 属性值以 “en” 开头的所有元素2
[attribute^=value]a[src^=“https”]选择其 src 属性值以 “https” 开头的每个 元素3
[attribute$=value]a[src$=".pdf"]选择其 src 属性以 “.pdf” 结尾的所有 元素3
[attribute*=value]a[src*=“abc”]选择其 src 属性中包含 “abc” 子串的每个 元素3

W3Cschool

选择器例子例子描述CSS
.class.intro选择 class=“intro” 的所有元素。1
#id#firstname选择 id=“firstname” 的所有元素。1
**选择所有元素。2
elementp选择所有

元素。

1
element,elementdiv,p选择所有
元素和所有

元素。

1
element elementdiv p选择
元素内部的所有

元素。

1
element>elementdiv>p选择父元素为
元素的所有

元素。

2
element+elementdiv+p选择紧接在
元素之后的所有

元素。

2
[attribute][target]选择带有 target 属性所有元素。2
[attribute=value][target=_blank]选择 target="_blank" 的所有元素。2
[attribute~=value][title~=flower]选择 title 属性包含单词 “flower” 的所有元素。2
[attribute|=value][lang|=en]选择 lang 属性值以 “en” 开头的所有元素。2
:linka:link选择所有未被访问的链接。1
:visiteda:visited选择所有已被访问的链接。1
:activea:active选择活动链接。1
:hovera:hover选择鼠标指针位于其上的链接。1
:focusinput:focus选择获得焦点的 input 元素。2
:first-letterp:first-letter选择每个

元素的首字母。

1
:first-linep:first-line选择每个

元素的首行。

1
:first-childp:first-child选择属于父元素的第一个子元素的每个

元素。

2
:beforep:before在每个

元素的内容之前插入内容。

2
:afterp:after在每个

元素的内容之后插入内容。

2
:lang(language)p:lang(it)选择带有以 “it” 开头的 lang 属性值的每个

元素。

2
element1~element2p~ul选择前面有

元素的每个

  • 元素。

3
[attribute^=value]a[src^=“https”]选择其 src 属性值以 “https” 开头的每个 元素。3
[attribute$=value]a[src$=".pdf"]选择其 src 属性以 “.pdf” 结尾的所有 元素。3
[attribute*=value]a[src*=“abc”]选择其 src 属性中包含 “abc” 子串的每个 元素。3
:first-of-typep:first-of-type选择属于其父元素的首个

元素的每个

元素。

3
:last-of-typep:last-of-type选择属于其父元素的最后

元素的每个

元素。

3
:only-of-typep:only-of-type选择属于其父元素唯一的

元素的每个

元素。

3
:only-childp:only-child选择属于其父元素的唯一子元素的每个

元素。

3
:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个

元素。

3
:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个

元素的每个

元素。

3
:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。3
:last-childp:last-child选择属于其父元素最后一个子元素每个

元素。

3
:root:root选择文档的根元素。3
:emptyp:empty选择没有子元素的每个

元素（包括文本节点）。

3
:target#news:target选择当前活动的 #news 元素。3
:enabledinput:enabled选择每个启用的 元素。3
:disabledinput:disabled选择每个禁用的 元素3
:checkedinput:checked选择每个被选中的 元素。3
:not(selector):not§选择非

元素的每个元素。

3
::selection::selection选择被用户选取的元素部分。3

几个例子

<!-- focus获取焦点 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus{
            background:yellow;
            border:10px solid pink;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>

GIF1.gif

<!-- ::selection的使用，当选中某些内容时将会触发 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        ::selection
        {
            color:#f40;
        }
        ::-moz-selection
        {
            color:#f40;
        }
    </style>
</head>
<body>

<h1>请试着选取页面上的文本</h1>

<p>这是一个段落。</p>

<div>这是 div 元素中的文本。</div>
<input type = 'text' value="这是一个输入框">
</body>
</html>

GIF2.gif

<!-- after和before的使用 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        p:before
        {
            content:"台词：";
            background-color:yellow;
            color:red;
            font-weight:bold;
        }
        .tang:after
        {
            content:"- 台词";
            background-color:yellow;
            color:red;
            font-weight:bold;
        }
    </style>
</head>
<body>
<p class="tang">我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</body>
</html>

image-20200516145140017.png

CSS3盒模型

盒模型主要是弹性盒子—flex布局，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当行为的布局方式，适用于移动端布局

关于flex布局方式可参考另一篇博客：Flex布局属性汇总

CSS3背景和边框

背景

CSS3提供了以下新的背景属性：

  1. background-image
  2. background-size
  3. background-origin
  4. background-clip

background-image

background-image可以添加背景图片，并且可以添加多张，不同的图片用逗号隔开，显示在最顶端的是第一张图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        /*#example1 {
            background-image: url(https://www.runoob.com/try/demo_source/img_flwr.gif), url(https://www.runoob.com/try/demo_source/paper.gif);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat;
            padding: 15px;
        }*/
        /*也能对每张图片单独设置其他属性*/
        #example1 {
            background: url(https://www.runoob.com/try/demo_source/img_flwr.gif) right bottom no-repeat, url(https://www.runoob.com/try/demo_source/paper.gif) left top repeat;
            padding: 15px;
        }
    </style>
</head>
<body>

<div id="example1">
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

background-size

background-size可用于指定背景图片的大小

div
{
    background:url(https://www.runoob.com/try/demo_source/img_flwr.gif);
    background-size:80px 60px;  /*固定大小*/
    background-size:100% 100%; /*相对于父元素的大小*/ 
    background-repeat:no-repeat;
}

background-original

该属性用于指定背景图像的位置区域

content-box、padding-box、border-box值表示放置的背景图像区域

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KHaKJkul-1589683289169)(http://ww1.sinaimg.cn/large/006d7Rewgy1geubs37px6g309p04ljr6.gif)]

div{
    background-original: content-box;
}

background-clip

background-clip用于背景裁剪属性是从指定位置开始绘制

content-box、padding-box、border-box值表示裁剪的区域

div{
    background-clip: content-box;
}

background

background是其他属性的简写，是[background-color] | [background-image] | [background-position] [background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],…等属性的简写

边框

CSS3提供了以下的边框属性:

  1. border-radius
  2. box-shadow
  3. border-image

border-radius

border-radius用于指定边框的圆角属性，与margin一样，可以有1，2，3，4个值(值可为绝对长度单位，也可以是百分比等相对长度单位)

  1. 若只有一个值，则表明四个圆角值相同
  2. 若两个值，第一个值为左上角和右下角，第二个值为左下角和右上角
  3. 若三个值，第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
  4. 若四个值，则分别表示左上角，右上角，右下角，左下角

通过百分比值可以绘制椭圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div{
            display: inline-block;
            height: 200px;
            width: 200px;
            background-color: #f40;
        }
        #div1{
            border-radius: 15px;
        }
        #div2{
            border-radius: 15px 35px;
        }
        #div3{
            border-radius: 15px 25px 35px;
        }
        #div4{
            border-radius: 15px 20px 25px 35px;
        }
        #div5{
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="div1">只有一个值border-radius: 15px;</div>
<div id="div2">只有两个值border-radius: 15px 35px;</div>
<div id="div3">只有三个值border-radius: 15px 25px 35px;</div>
<div id="div4">有四个值border-radius: 15px 20px 25px 35px;</div>
</body>
</html>

image-20200516162143079.png

border-radius其实是 border-top-left-radius 、 border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个样式的简写形式

box-shadow

该属性用于添加阴影

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

值说明
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset可选。从外层的阴影（开始时）改变阴影内侧阴影
div{
	box-shadow: 10px 10px 10px 10px #f40;
}

image-20200517093854809.png

border-image

该属性可以使用图片来创建一个边框

border-image: source slice width outset repeat|initial|inherit;

值描述
border-image-source用于指定要用于绘制边框的图像的位置
border-image-slice图像边界向内偏移
border-image-width图像边界的宽度
border-image-outset用于指定在边框外部绘制 border-image-area 的量
border-image-repeat用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。
div{
    border: 10px solid transparent;
    padding: 15px;
    /*省略即为默认值*/
    -webkit-border-image: url(https://www.runoob.com/images/border.png) 30 stretch; 
    -o-border-image: url(https://www.runoob.com/images/border.png) 30 stretch;
    border-image: url(https://www.runoob.com/images/border.png) 30 stretch;
}

image-20200517094304439.png

文字特效

CSS3字体

使用CSS3，可以使用任何字体，而不是非得计算机上已安装的字体

@font-face

@font-face规则：

@font-face允许使用任何字体，只是需要将字体的网址添加进来，用户使用时就会自动下载

@font-face{
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf') ,url('Sansation_Light.eot'); /* IE9 */
}
div{
	font-family:myFirstFont;
}

@font-family可选属性

描述符值描述
font-familyname必需。规定字体的名称。
srcURL必需。定义字体文件的 URL。
font-stretchnormal/ condensed/ ultra-condensed/ extra-condensed/ semi-condensed/ expanded/ semi-expanded/ extra-expanded/ ultra-expanded可选。定义如何拉伸字体。默认是 “normal”。
font-stylenormal | italic | oblique可选。定义字体的样式。默认是 “normal”。
font-weightnormal | bold | 100|200 |300|400|500| 600| 700| 800| 900可选。定义字体的粗细。默认是 “normal”。
unicode-rangeunicode-range可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

文字效果

CSS3新增的文本属性：

  1. text-shadow
  2. box-shadow（即边框的box-shadow）
  3. text-overflow
  4. word-wrap
  5. word-break

text-shadow

text-shadow用于给文字添加阴影

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

值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。
h1{
    text-shadow: 5px 5px 5px #FF0000;
}

text-overflow

该属性指定当文本溢出时，内部内容应该有啥效果

值描述
clip修剪文本。——默认值
ellipsis显示省略符号来代表被修剪的文本。
string使用给定的字符串来代表被修剪的文本
div{
    text-overflow: clip;
}

word-wrap

该属性用于是否自动换行

值描述
normal只在允许的断字点换行(浏览器保持默认处理)—默认值
break-word在长单词或 URL 地址内部进行换行
div{
    word-wrap: normal;
}

word-break

该属性规定非中日韩文本的换行规则

word-break: normal|break-all|keep-all;

值描述
normal使用浏览器默认的换行规则。—默认值
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。
div{
    word-break: normal;
}

text-justify

该属性指定应怎样对齐文本以及对齐间距

text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;

值描述
auto浏览器决定齐行算法。—默认值
none禁用齐行。
inter-word增加/减少单词间的间隔。
inter-ideograph用表意文本来排齐内容。
inter-cluster只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
distribute类似报纸版面，除了在东亚语系中最后一行是不齐行的。
kashida通过拉伸字符来排齐内容。

text-outline

该属性设置文本的轮廓，但是这个样式现在所有浏览器都不支持

text-outline: thickness blur color;

值描述
thickness必需。轮廓的粗细。
blur可选。轮廓的模糊半径。
color必需。轮廓的颜色。

2D/3D转换

2D转换

在CSS3中2D转换增加transform属性，并添加了下列方法：

  1. translate()—设置元素的位置，可以设置上或下移动，可分为translateX()和translateY()两个方法
  2. rotate(angle)—规定元素的旋转角度，角度可为负，顺时针为正，逆时针为负
  3. scale()—缩放或放大元素，有scaleX()和scaleY()两个方法
  4. skew()—规定元素在X轴和Y轴的倾斜角度，有skewX(angle)和skewY(angle)两个方法
  5. matrix()—定义2D变换，有六个参数，包含了旋转、缩放、平移和倾斜功能
/*平移*/
div{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

/*旋转*/
div{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

/*缩放*/
div{
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}

/*倾斜*/
div{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

/*矩阵变换matrix(a,b,c,d,e,f)*/
div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

如矩阵为matrix(a,b,c,d,e,f)，则其变换规则为

1506529-20190321213337602-700645942.png

3D转换

在3D变换中，transform属性主要有下列方法：

  1. rotateX()— 绕其在一个给定度数X轴旋转的元素
  2. rotateY()—绕其在一个给定度数Y轴旋转的元素
  3. rotateZ()—绕其在一个给定度数Z轴旋转的元素
函数描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。

另外还有其他属性：

属性描述CSS
transform向元素应用 2D 或 3D 转换。3
transform-origin允许你改变被转换元素的位置。3
transform-style规定被嵌套元素如何在 3D 空间中显示。3
perspective规定 3D 元素的透视效果。3
perspective-origin规定 3D 元素的底部位置。3
backface-visibility定义元素在不面对屏幕时是否可见。3

transform

语法： transform: none|transform-functions;

transform-functions是方法，包括2D/3D共有下列方法

值描述
none定义不进行转换。
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换，只是用 X 轴的值。
translateY(y)定义转换，只是用 Y 轴的值。
translateZ(z)定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。

transform-style

该属性用于指定嵌套元素是怎样在三维空间中呈现 ，有下列值：

值描述
flat表示所有子元素在2D平面呈现。
preserve-3d表示所有子元素在3D空间中呈现。

backface-visibility

backface-visibility 属性定义当元素背面向屏幕时是否可见，在旋转元素时很有用

值描述
visible背面是可见的。
hidden背面是不可见的

perspective

该属性用于设置3D元素的透视效果，只有设置了该属性，才会显示3D效果

perspective: number|none(默认值);

number用于设置元素距离视图的距离，以像素计算

CSS3中的三维坐标系

20200510202555218.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#div1{
	position: relative;
	height: 150px;
	width: 150px;
	margin: 50px;
	padding:10px;
	border: 1px solid black;
	perspective:150;
	-webkit-perspective:150; /* Safari and Chrome */
}
#div2{
	padding:50px;
	position: absolute;
	border: 1px solid black;
	background-color: red;
	transform: rotateX(45deg);
	-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c2JM7CLU-1589683289178)(http://ww1.sinaimg.cn/large/006d7Rewgy1geui15km65j306k06a0sj.jpg)]

CSS3渐变

渐变(gradients)可以让两个或多个颜色之间平稳的过渡

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

  1. 线性渐变(linear gradients)：向上/向下/向左/向右/对角线方向
  2. 径向渐变(radial gradients)：从中心向外扩散

线性渐变

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, …); 在后面可以添加多个颜色

/*从上到下的线性渐变*/
#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}
/*从左到右的渐变*/
#grad {
  background-image: linear-gradient(to right, red , yellow);
}
/*对角线的渐变—左上角到右下角*/
#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}
/*通过设置自定义角度来决定渐变方向*/
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}
/*使用多种颜色*/
#grad {
  background-image: linear-gradient(red, yellow, green);
}
/*使用透明度渐变*/
#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
/*重复的线性渐变*/
#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变

由中心向外扩散渐变。默认情况下，渐变中心是center，渐变形状是ellipse，渐变大小是farther-corner(表示到最远的角落)

语法: background-image: radial-gradient(shape size at position, start-color, …, last-color);

/*径向渐变-颜色均匀分布，中心默认*/
#grad {
  background-image: radial-gradient(red, yellow, green);
}
/*分布不均匀的径向渐变，颜色比例越大，所占区域越多*/
#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
/*设置扩散形状，shape可以是circle和ellipse*/
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

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

  1. close-side
  2. farthest-side
  3. closest-corner
  4. farthest-corner
#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

重复径向渐变— repeating-radial-gradient

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

CSS3过渡及动画

过渡

transition

CSS3过渡是指元素从一种样式逐渐变换为另一种样式

必须要指定两项内容

  1. 指定要添加效果的CSS属性
  2. 指定效果的持续时间

transition是其余四个属性的简写形式

transition: property duration timing-function delay;

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。有一个all值，表示所有属性都有过渡效果。none|all|property3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 “ease”3
transition-delay规定过渡效果何时开始。默认是 0。3

transition-timing-function属性详解

值描述
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	-webkit-transition:width 2s; /* Safari */
}
div:hover{
	width:300px;
}
</style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</html>

GIF3.gif

若想多项样式改变，则需要添加多个样式的变换效果，并用逗号分隔

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, transform 2s;
}
div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

动画

@keyframes和animation

@keyframes规则

  1. 该规则用于创建动画
  2. 规则内指定一个CSS样式和动画将逐步从目前的样式改为新的样式

如果遇到浏览器可能不兼容的情况，需要添加前缀：-webkit-、-ms-、-moz-，其他的属性也是如此

@keyframes myfirst{
    from {background: red;}
    to {background: yellow;}
} 
/* Safari 与 Chrome */
@-webkit-keyframes myfirst{
    from {background: red;}
    to {background: yellow;}
}

使用@keyframes来创建动画，然后将它绑定到一个元素上。需要指定至少两个动画属性来绑定一个选择器：

  1. 规定动画的名称
  2. 规定动画的时长
div{
	width:100px;
	height:100px;
	background:red;
    /*规定动画名称以及时长*/
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst{
	from {background:red;}
	to {background:yellow;}
}
/* Safari and Chrome */
@-webkit-keyframes myfirst {
	from {background:red;}
	to {background:yellow;}
}

通过百分比来规定变化的时间来替代关键词’from’和’to’，等同于0%和100%。最好始终定义0%和100%

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@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;}
}
/* Safari and Chrome */
@-webkit-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;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

GIF4.gif

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性，除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 “ease”。3
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。3
animation-play-state规定动画是否正在运行或暂停。默认是 “running”。3
/*所有动画属性*/
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 and 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;
}

/*动画属性简写形式*/
div{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

/*规定动画*/
@keyframes myfirst{
	from {background:red;}
	to {background:yellow;}
}
/* Safari and Chrome */
@-webkit-keyframes myfirst {
	from {background:red;}
	to {background:yellow;}
}

多列布局

CSS3可以将文本 内容设计成像报纸一样多列布局。关于多列布局有以下属性：

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

column-count

指定将元素分割的列数

/*将div元素中的文本分为3列*/
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

image-20200516214017928.png

column-width

column-width属性指定了列的宽度

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}

column-gap

column-gap 属性指定了列与列间的间隙

div{
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;
	/*规定各列之间的间距*/
	-moz-column-gap:40px; /* Firefox */
	-webkit-column-gap:40px; /* Safari and Chrome */
	column-gap:40px;
}

column-rule

column-rule是 column-rule-style 、 column-rule-width、 column-rule-color 的简写

  1. column-rule-style 属性指定了列与列间的边框样式
  2. column-rule-width 属性指定了两列的边框厚度
  3. column-rule-color属性指定了两列的边框颜色
div{
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
    
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
    
   -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}

/*简写形式*/
div{
    /* Chrome, Safari, Opera */
    -webkit-column-rule: 1px solid lightblue; 
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

image-20200516215048141.png

用户界面

CSS3增加了一些新的用户界面特性，如调整元素尺寸、框尺寸和外边框：

下面是所有增加的属性

属性说明CSS
appearance允许您使一个元素的外观像一个标准的用户界面元素3
box-sizing允许你以适应区域而用某种方式定义某些元素3
icon为创作者提供了将元素设置为图标等价物的能力。3
nav-down指定在何处使用箭头向下导航键时进行导航3
nav-index指定一个元素的Tab的顺序3
nav-left指定在何处使用左侧的箭头导航键进行导航3
nav-right指定在何处使用右侧的箭头导航键进行导航3
nav-up指定在何处使用箭头向上导航键时进行导航3
outline-offset外轮廓修饰并绘制超出边框的边缘3
resize指定一个元素是否是由用户调整大小3

resize

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

值描述
none用户无法调整元素的尺寸—默认值
both用户可调整元素的高度和宽度。
horizontal用户可调整元素的宽度。
vertical用户可调整元素的高度。
div{
    resize:both;
    overflow:auto;
}

box-sizing

用于定于盒模型，主要有标准盒模型(content-box)和怪异盒模型(border-box)，可以参考博客CSS之盒模型

outline-offset

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

轮廓与边框不同之处在于：

  1. 轮廓不占用空间
  2. 轮廓可以是非矩形
/*边框向外偏移15px*/
div{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

outline

outline是 outline-color, outline-style, outline-width的简写 ——非CSS3属性

值描述
outline-color规定边框的颜色，即颜色值
outline-style规定边框的样式，有none(默认值)、dotted、dashed、solid、double、groove、ridge、inset、outset值
outline-width规定边框的宽度，有thin、medium(默认值)、thick、length值

参考链接： https://www.runoob.com/css3/css3-tutorial.html

Hello Simon
关注
  • 6
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[工具]HTML5和CSS3工具资源汇总
02-26
CSS3颜色值查询手册，包括颜色英文名、16进制值、rgb百分比、rgb整数值、颜色缩写和颜色效果等…在线测试CSS3新特性，即时生成效果。该工具可以帮助你测试当前你使用的浏览器对HTML5的兼容情况，很详细，很有用！...
11.CSS3新增了哪些新特性？
kleinBlue.的博客
11-07 2928
一、是什么 css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的 CSS3也增加了很多新特性，为开发者带来了更佳的开发体验 从几个维度列举一些常见的特性，如下 二、选择器 css3中新增了一些选择器，主要为如下图所示： 三、新样式 边框 css3新增了三个边框属性，分别是： border-radius：创建圆...
【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.
day7小结
KanaseKanon的博客
09-24 777
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新增特性
m0_47743942的博客
03-25 1092
对css3新增特性进行简介，主要包括：新增长度单位、新增颜色设置方式、新增选择器、新增盒子属性、新增背景属性、新增边框属性、新增文本属性、新增渐变（本质背景图片）、新增字体、2D变换、3D变换、过渡、动画、过渡和动画对比、多列布局、伸缩盒模型、响应式布局、BFC、前端学习，并在最后补充了绝对定位元素的位置
css3新特性
weixin_44992737的博客
06-19 4305
css3新特性详解
使用单div实现CSS 绘图方法汇总
01-21
为什么只使用一个 Div？ 2013年5月，我参加了 CSSConf，看到了Lea Verou 关于 border-radius 的演讲，你可能会认为这个...这个实验的目的是让我们了解颜色的特性，同时这种限制也让我们明白了混合的力量。你当然可以
HTML、CSS、JS技术实现手势锁实现、动态按钮效果、画布应用、时钟设计效果等收藏汇总.zip
最新发布
04-11
每个Demo都是对特定前端技术的探索，无论是研究HTML5的新特性、CSS3的动画效果，还是JavaScript的高级功能。这些示例不仅适合初学者学习和理解前端开发的基础知识，也适合有经验的开发者寻找灵感或者解决特定问题。 ...
mdn：:open_book:MDN Web开发知识汇总，以及一些Git高级特性
02-08
MDN MDN知识汇总，Git高级技巧。 知识链接 Git技巧
CSS3新特性
博哥的二进制世界
03-07 661
CSS3新特性
css3新特性总览
low666的博客
04-07 702
css3新特性 css3选择器 选择器 示例 示例说明 .class .intro 选择所有class="intro"的元素 #id #firstname 选择所有id="firstname"的元素 * * 选择所有元素 element p 选择所有< p>元素 element,element div,p 选择所有< div>元素和 <...
CSS3有哪些新特性？
limeng886549的博客
08-01 647
整理罗列了一些，如果少了点啥还请见谅哈~ CSS3有哪些新特性如下： 1、圆角—border-radius，阴影—box-shadow。 2、文字特效—text-shadow，线性渐变—gradient，旋转—transform。 3、旋转—transform:rotate(9deg)，缩放— scale(0.85,0.90) ,定位—translate(0px,-30px) ，倾斜—skew(-...
H5新增的属性、样式
qq_40137713的博客
05-28 488
-新增元素 说明 新增元素 说明 viode 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcapton 图例的说明 main ti...
CSS基础知识（十四）：CSS3新特性
前端
11-05 729
文章目录一、CSS3新增选择器1.属性选择器2.结构伪类选择器3.伪元素选择器 。 一、CSS3新增选择器 1.属性选择器 属性选择器：根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 选择符 简介 E[att] 选择具有att属性的E元素 E[att=“value”] 选择具有att属性且属性值等于value的E元素 E[att^=value] 匹配具有att属性且属性值以value开头的E元素 E[att$=“value”] 匹配具有att属性且属性
html5 css3新特性
08-22
HTML5和CSS3带来了许多令人兴奋的新特性。下面是其中一些主要的特性： HTML5： 1. 语义化标签：HTML5引入了一些新的语义化标签，如、、和，使得代码更加清晰易懂。 2. 媒体元素：新增的和标签可直接在网页中嵌入...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值