面试：CSS3新特性

最新推荐文章于 2022-10-02 14:50:45 发布

oiaa

最新推荐文章于 2022-10-02 14:50:45 发布

阅读量500

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_41900808/article/details/88979753

版权

前端专栏收录该内容

122 篇文章 1 订阅

订阅专栏

选择器

element1~element2: 通用用兄弟选择器
[attribute^=value]: 选择某元素attribute属性是以value开头的。
[attribute$=value]: 选择某元素attribute属性是以value结尾的。
[attribute*=value]: 选择某元素attribute属性包含value字符串的。
E:first-of-type: 选择属于其父元素的首个E元素的每个E元素。
E:last-of-type: 选择属于其父元素的最后E元素的每个E元素。
E:only-of-type: 选择属于其父元素唯一的E元素的每个E元素。
E:only-child: 选择属于其父元素的唯一子元素的每个E元素。
E:nth-child(n): 选择属于其父元素的第n个子元素的每个E元素。
E:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的每个E元素。
E:nth-of-type(n): 选择属于其父元素第n个E元素的每个E元素。
E:nth-last-of-type(n): 选择属于其父元素倒数第n个E元素的每个E元素。
E:last-child: 选择属于其父元素最后一个子元素每个E元素。
:root: 选择文档的根元素。
E:empty: 选择没有子元素的每个E元素（包括文本节点)。
E:target: 选择当前活动的E元素。
E:enabled: 选择每个启用的E元素。
E:disabled: 选择每个禁用的E元素。
E:checked: 选择每个被选中的E元素。
E:not(selector): 选择非selector元素的每个元素。
E::selection: 选择被用户选取的元素部分。

动画

Transition

transition-property: 规定应用过渡的CSS属性的名称。
transition-duration: 规定完成过渡效果需要多长时间。
transition-delay: 规定过渡效果何时开始，默认是0。
transition-timing-function: 规定过渡效果的时间曲线，默认是”ease”，还有linear、ease-in、ease-out、ease-in-out和cubic-bezier等过渡类型。
transition: 简写属性，用于在一个属性中设置四个过渡属性。

div {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

div {
    transition: width 1s linear 2s;
}

Transfrom

Transform用来向元素应用各种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转换元素定义透视视图

Animation

动画

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
}

@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}

边框

border-radius：创建圆角边框
box-shadow：添加阴影
border-image：使用图片来绘制边框

背景

background-clip

background-clip属性用于确定背景画区

background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box

通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。

background-origin

background-origin属性用于确定背景的位置，它通常与background-position联合使用，可以从 border、padding、content来计算background-position（就像background-clip）。

background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position

background-size

background-size属性常用来调整背景图片的大小，主要用于设定图片本身。

background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包含元素的尺寸

background-break

CSS3中，元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景。

文字效果

word-wrap

强制文本进行换行，即这意味着会对单词进行拆分

p {
    word-wrap: break-word;
}

text-overflow

它与word-wrap是协同工作的，word-wrap设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow则设置或检索当当前行超过指定容器的边界时如何显示。对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。

text-shadow

text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

p {
    text-shadow: 5xp 5px 5px #000;
}

text-decoration

text-fill-color: 设置文字内部填充颜色
text-stroke-color: 设置文字边界填充颜色
text-stroke-width: 设置文字边界宽度

渐变

linear-gradient(线性渐变)和radial-gradient(径向渐变)

@font-face特性

可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上

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

多列布局

column-count: 规定元素应该被分隔的列数。
column-gap: 规定列之间的间隔。
column-rule: 设置列之间的宽度、样式和颜色规则

更详细见：http://www.runoob.com/css3/css3-multiple-columns.html

用户界面

resize

resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。

更详细见：http://www.runoob.com/cssref/css3-pr-resize.html

box-sizing

content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 (Element width = width + border + padding)，此属性表现为标准模式下的盒模型。
border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 (Element width = width)，此属性表现为怪异模式下的盒模型。