- 2019-12-16
上篇讲了HTML5,这篇来讲CSS3的新特性。有兴趣的可以移步看一下。
HTML5、CSS3新特性一览(上)。
要素过多,这里加个目录
— 新特性 —
1. 媒体查询
- 可以查询设备的物理像素然后进行自适应操作
- 从 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" />
(2). css中的媒体查询规则
@media all and (min-width: 800px) {
/* 这里填写css样式 */
/* all代表所有媒体类型,这里的样式精会应用与所有媒体类型 */
/* (min-width:800px)表示最小宽度为800px的屏幕会应用这个样式 */
}
(3). and 条件(与,且)
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) {
/* and 条件等同于js里的 &&(且),这里的样式必须同时符合上面两个条件才会展示 */
}
(4). or 条件(或)
@media (min-width:800px) or (orientation:portrait) {
/* or 条件等同于js里的 ||(或),这里的样式只需符合上面其中之一的条件就会展示 */
}
(5). not条件(非)
@media (not min-width:800px){
/* not 条件等同于js里的 !(非),这里的样式不符合最小宽度为800px展示 */
}
2. 选择器
- 选择器大家之前肯定用过,我就只列CSS3新加的用法好了。
(1)通过元素的属性选择
div~p{
/* 选择前面有 div 元素的每个 p 元素 */
}
a[src^="https"]{
/* 选择 src 属性以 “https” 开头的每个a元素 */
}
a[src$=".pdf"]{
/* 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素 */
}
a[src*="abc"]{
/* 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素 */
}
(2)通过元素的位置来选择
p:first-of-type{
/* 选择属于其父元素的首个 <p> 元素的每个 <p> 元素 */
}
p:last-of-type{
/* 选择属于其父元素的最后 <p> 元素的每个 <p> 元素 */
}
p:only-of-type{
/* 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素 */
}
p:only-child{
/* 选择属于其父元素的唯一子元素的每个 <p> 元素 */
}
p:nth-child(2){
/* 选择属于其父元素的第二个子元素的每个 <p> 元素 */
}
p:nth-last-child(2){
/* 同上,从最后一个子元素开始计数 */
}
p:nth-of-type(2){
/* 选择属于其父元素第二个 <p> 元素的每个 <p> 元素 */
}
p:nth-last-of-type(2){
/* 同上,但是从最后一个子元素开始计数 */
}
p:last-child{
/* 选择属于其父元素最后一个子元素每个 <p> 元素 */
}
(3)通过状态选择元素
:root{
/* 选择文档的根元素 */
}
p:empty{
/* 选择没有子元素的每个 <p> 元素(包括文本节点) */
}
#news:target{
/* 选择当前活动的 #news 元素 */
}
input:enabled{
/* 选择每个启用的 <input> 元素 */
}
input:disabled{
/* 选择每个禁用的 <input> 元素 */
}
input:checked{
/* 选择每个被选中的 <input> 元素 */
}
:not(p){
/* 选择非 <p> 元素的每个元素 */
}
::selection{
/* 选择被用户选取的元素部分 */
}
3. 弹性盒子
- 弹性盒子是 CSS3 新添加的一种布局模式。
- 弹性盒子这个很多人都讲过了,官方也有文档,都讲的非常清楚。
- 我个人觉得这个很好用,也没有踩过什么坑,所以就不展开讲了,贴一下常用的属性。
属性 | 描述 |
---|---|
display | 指定 HTML 元素盒子类型 |
flex-direction | 指定了弹性容器中子元素的排列方式 |
justify-content | 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。 |
align-items | 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。 |
flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
align-content | 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐 |
flex-flow | flex-direction 和 flex-wrap 的简写 |
order | 设置弹性盒子的子元素排列顺序。 |
align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
flex | 设置弹性盒子的子元素如何分配空间。 |
— 盒子样式 —
1. border-radius 圆角样式
可以给元素添加圆角,将原来的方形盒子变成圆角的盒子。
.box1{
border-radius: 10px;
}
也可以规定不同大小的圆角,做成特殊形状的盒子。
/* 多个值的时候只需要记住,数值在左上角开始,顺时针旋转就可以了 */
.box2{
border-radius: 10px 20px; /* 左上角和右下角为10px,右上角和左下角为20px */
}
.box3{
border-radius: 10px 20px 30px; /* 左上角为10px,右上角和左下角为20px,右下角为30px */
}
.box4{
border-radius: 10px 20px 30px 40px; /* 左上角为10px,右上角为20px,右下角为30px,左下角为40px */
}
/* 可以分开定义,box5等价于box4 */
.box4{
border-top-left-radius: 10px; /* 左上角为10px */
border-top-right-radius: 20px; /* 右上角为20px */
border-bottom-right-radius: 30px; /* 右下角为30px */
border-bottom-left-radius: 40px; /* 左下角为40px */
}
2. box-shadow 盒子阴影
- box-shadow的前三个值分别代表x轴位移,y轴位移,和(模糊的)阴影大小,是必填项。
- 第四个值代表不模糊的阴影大小,可以不填。
- 默认情况下,box-shadow显示的是外阴影,如果写了inset则代表内阴影,可以用来做立体效果(比如按钮)。
.box1{
box-shadow: 10px 10px 5px 5px #888888 inset;
}
3. border-image 图像边框
这个样式我之前写过一次,这里就不重复了。有兴趣的可以点这里跳转。
4. background 盒子背景
- 关于background-clip之前在盒子模型的时候讲过一点,附上链接。
- background-Origin用于定义背景对齐方式,可选值和background-clip一样。
- background-size也是新增的属性,用于定义背景图片大小。可以使用px或%来设置,也可以用contain规定缩放为可以完整显示的最大大小,或使用cover规定显示为全部覆盖的最小大小。
- 还有值得一提的是背景支持多个图片,顺序是越靠前的显示在越上面。
.box1{
background-image: url(bg.png), url(img.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
/* 也可以合并起来简写,box2等价于box1 */
.box2{
background: url(bg.png) right bottom no-repeat, url(img.png) left top repeat;
}
5. 渐变背景
- css3支持盒子渐变背景,分为线性渐变(Linear Gradients)和径向渐变(Radial Gradients)。
- 可以添加多个颜色节点和设置节点位置。
- 可以规定渐变角度(线性渐变)。
- 讲起来内容有点多… 所以我直接把代码贴在这里 大家自行做完形填空吧:D
/* 这个是径向渐变 */
.box1{
/* linear-gradient径向渐变,left起点方向(等于90deg),第一个颜色和位置(颜色支持# rgb rgba..,位置可以是px或%),以此类推.. */
background: linear-gradient(left , rgb(224, 119, 97) 17% , rgb(23, 178, 116) 32%);
/* 移动端的话上面那个就够用,下面这些是为了兼容各个浏览器 */
background: -o-linear-gradient(left , rgb(224, 119, 97) 17% , rgb(23, 178, 116) 32%);
background: -ms-linear-gradient(left , rgb(224, 119, 97) 17% , rgb(23, 178, 116) 32%);
background: -moz-linear-gradient(left , rgb(224, 119, 97) 17% , rgb(23, 178, 116) 32%);
background: -webkit-linear-gradient(left , rgb(224, 119, 97) 17% , rgb(23, 178, 116) 32%);
}
6. CSS3用户界面 / 盒模型
- 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框,
(1). resize
- resize 用于规定是否可以由用户调整元素的大小。
可选值包括:none(不可调整),both(可调整宽高),horizontal(可调整宽度),vertical(可调整高度)。 - 这个属性不仅可以让普通元素可调整宽高,还解决了之前 textarea 的宽高总是能被拖动的问题。
textarea{
resize: none;
}
(2). box-sizing
- box-sizing 用于规定盒子尺寸,之前讲过了可以直接去看,就不在重复了。
css盒子模型和样式更改。
(3). outline
- outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
轮廓线属性包括:outline-color,outline-style,outline-width。简写时按照这个顺序进行声明。
如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。 - 轮廓线不会占据空间,也不一定是矩形。
outline在border外侧,并不在margin外侧(也就是与margin无关),可以用来做外层边框的样式。
.box1 {
outline: #00ff00 dotted 10px;
}
/* 也可以分开写,box2样式等价于box1 */
.box2{
outline-color: #00ff00;
outline-style: dotted;
outline-width: 10px;
}
— 文本样式 —
1. text-shadow 文本阴影
文本阴影类似盒子阴影,但是少了阴影大小和内阴影两个可选选项。
可定义的值包括:x轴偏移、y轴偏移、模糊大小、阴影颜色。
.text1{
text-shadow: 5px 5px 5px #FF0000;
}
2. text-overflow 溢出文本展示
可以利用这个属性,设置文本只能在一行或几行内展示。
/* 文本在一行内展示 */
.text1{
display: block; /* 行内元素不用 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 文本在多行展示 */
.text2{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 几行后显示省略号 */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
3. word-wrap 文字换行(英文和数字)
规定当英文或数字真的非常长的话要不要自动换行,(默认不换行,会溢出这个盒子)。
.text1{
word-wrap:break-word;
}
4. word-break 单词换行(英文和数字)
如果只用 word-wrap 可能仍然不够美观,因为浏览器在默认情况下不会对没有超过盒子长度的单词强制换行,所以展示的效果可能还是参差不齐的。所以一般会配合 word-break 同时使用。
.text1{
word-break:keep-all; //只在半角空格或连字符处换行
}
.text2{
word-break:break-all; //允许在单词内换行
}
5. @font-face 规则定义字体
- 使用@font-face 规则可以定义任意一种你能找到的字体展示在页面里。
- 但是这个规则的兼容性并没有那么好,IE9才开始支持这个规则,这就表示在IE8及其之前的版本可能展示不出来。所以我个人不是很推荐,如果只是标题需要花字的话更推荐通过添加图片展示。
6. column-count 创建多列
- column-count规定文本可以以几列的方式布局
- 这个属性我没怎么用过,因为感觉在兼容性上并不是很好,当然主要原因是还没有遇到可以用他来实现的需求hhhh,所以就先把用法贴在这里了,如果以后有用到或者踩坑了再更吧。
.box{
column-count:3; /* 文本将分为3列展示 */
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}
- 还有其他的属性和用法一起贴在这里了
属性 | 用法 |
---|---|
columns | 设置 column-width 和 column-count 的简写 |
column-fill | 指定如何填充列 |
column-gap | 指定列与列之间的间隙 |
column-rule | 所有 column-rule-* 属性的简写 |
column-rule-color | 指定两列间边框的颜色 |
column-rule-style | 指定两列间边框的样式 |
column-rule-width | 指定两列间边框的厚度 |
column-span | 指定元素要跨越多少列 |
column-width | 指定列的宽度 |
— 变形和动画 —
1. 2D/3D转换和变形
(1)2D转换
- translate 移动
.box1{
transform:translate(50px,100px); /* 向右移动50px,向下移动100px */
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
- rotate 旋转
.box2{
transform: rotate(30deg); /* 顺时针旋转30度(负数的话为逆时针旋转) */
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
- scale 缩放
.box3{
transform: scale(2,3); /* x轴缩放为2倍,y轴缩放为3倍 */
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
}
(2)3D转换
- rotateX()
.box1{
transform:rotateX(120deg); /* 沿x轴旋转120度 */
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
- rotateY()
.box2{
transform:rotateY(120deg); /* 沿y轴旋转120度 */
-webkit-transform:rotateY(120deg); /* Safari and Chrome */
}
2. transition 过渡动画
- 过渡共有四个属性,分别为:
transition-property( 属性名称),必填
transition-duration(花费时间,默认为0),必填
transition-timing-function(时间曲线,默认为“ease”)
transition-delay(动画延时,默认为0) - 可以使用transition简写,同时设置以上四个属性。
(1)简单的宽高变化
.box1{
transition: width 1s linear 2s; /* 宽度变化,动画时间1s,速度曲线linear,延时2s */
-webkit-transition:width 1s linear 2s; /* Safari */
}
/* 也可以分开写,box2等价于box1 */
.box2{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
(2)transition可以同时添加多个属性的变化
.box3{
/* 多个属性都需要变化时,用逗号分隔 */
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
3. @keyframes 规则和 animation动画
- @keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
@keyframes myfirst{
/* 可以用form和to,更精细的也可以用百分比 */
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst{ /* Safari 与 Chrome */
from {background: red;}
to {background: yellow;}
}
-
使用animation 把定义好的动画绑定到一个选择器上
如果不绑定,相当于没有元素应用这个动画,动画不会有任何效果 -
animation 的用法和 transition 类似,只是名称不是宽高等属性名称,而是我们刚刚定义的动画名称
.box1{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
- animation 相比 transition 多了几个属性,分别为:
属性 | 作用 |
---|---|
animation-fill-mode | 规定当动画不播放时,比如动画完成或当动画有一个延迟未开始播放时,应用到元素的样式。 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 |