css3新属性介绍

web 专栏收录该内容
22 篇文章 1 订阅

CSS3

css3新增的属性大多数要添加前缀以达兼容。

浏览器前缀浏览器
-webkit-Google Chrome, Safari, Android Browser
-moz-Firefox
-o-Opera
-ms-Internet Explorer, Edge
-khtml-Konqueror

结构(位置)伪类选择器(CSS3)

  • +:获取当前元素的相邻的满足条件的元素。
  • ~:获取当前元素满足条件的兄弟元素。
  • :first-child :选取属于其父元素的首个子元素的指定选择器
  • :last-child :选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型
  • :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
    n 可以是数字、关键词或公式,even偶数,odd奇数
  • :first-of-type :选择属于其父元素的首个

    元素的每个

    元素。

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

    元素的每个

    元素。

  • :nth-of-type :选择属于其父元素第n个

    元素的每个

    元素。

目标伪类选择器(CSS3)

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

属性选择器(CSS3)

选取标签带有某些特殊属性的选择器 我们成为属性选择器

/* 获取到 拥有 该属性的元素 */
div[class] {
    /* 查找所有拥有class属性的div */
}
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
			color: pink;
}
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
			color: skyblue;
}
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
			color: green;
}

伪元素选择器(CSS3,重要)

  1. E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
  2. E::first-line 文本第一行;
  3. E::selection 可改变选中文本的样式;
  4. E::before和E::after
    在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。
div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素,CSS3的规范里**“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before,这样做的目的是用来做兼容处理。
":" 与 “::” 区别在于区分伪类和伪元素
之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查。
注意:
伪元素:before和:after添加的内容
默认是inline元素**;这个两个伪元素的content属性,表示伪元素的内容,设置:before和:after时必须设置其content属性,否则伪元素就不起作用。

CSS3盒模型(重要)

CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
1、**box-sizing: content-box ** 盒子大小为 width + padding + border ,content-box:此值为其默认值,其让元素维持W3C的标准Box Mode。
2、box-sizing: border-box 盒子大小为 width ,就是说 padding 和 border 是包含到width里面的。
注:上面的标注的width指的是CSS属性里设置的width: length,content的值是会自动调整的。

颜色模式

  1. RGBA
  • R红色,G绿色,B蓝色,A透明度
  1. HSLA
  • H色调色相,0或360表示红色,120表示绿色,240表示蓝色,取值为0~360。
  • S饱和度,取值0~100%。
  • L亮度,取值0~100%。
  • A透明度,取值0~1。

盒子阴影(CSS3)

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
(前两个必写)

文本阴影text-shadow

text-shadow:x轴 y轴 模糊半径 颜色;
模糊半径和颜色为可选项。可添加多层。

渐变(放在background里用)

  1. 线性渐变linear-gradient沿着某条直线朝一个方向产生渐变效果。

linear-gradient ([[ | to <side-or-corner],] ? , [,…]);

angle渐变方向:

  • to left 从右到左,相当于279deg
  • to right 从左到右,相当于90deg
  • to top 从下到上,相当于0deg
  • to bottom 从上到下,相当于180deg(默认)

= <color起止颜色>[<length用长度指定起止色位置> | <percentage用百分比指定>]?

background:linear-gradient(to left,red 50px,blue);
  1. 径向渐变radial-gradient从一个中心店开始沿着四周产生渐变效果。

radial-gradient ([ [ || ] [at ] ?, | at ]?, [,…]);

shape渐变的形状:

  • ellipse表示椭圆形(默认)
  • circle表示圆形

size大小:

  • closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边
  • closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角
  • farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边
  • farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角

at 坐标:

默认正中心,可以是top bottom left right,也可以是length用长度指定起止位置和percentage用百分比。

= <color起止颜色>[<length用长度指定起止色位置> | <percentage用百分比指定>]?

background: radial-gradient(circle closest-side at 50px 50px, red,blue);
  1. 重复渐变
    repeating-linear-gradient与线性渐变语法一样。
    repeating-radial-gradient与径向渐变语法一样,只不过只要写要重复的部分即可。
background: repeating-linear-gradient(to bottom, #fff 0%, #fff 10%, #000 10%, #000 20%);
background: repeating-radial-gradient(circle at center, #fff 0%, #fff 10%, #000 10%, #000 20%);

transition过渡效果属性(重点)

transition: property duration timing-function delay;
只能为有具体值的属性添加,从某个值到某个数值。过渡完会恢复原来的样子。
transiton属一个简写属性,有以下取值(可单设置,可多写设置多过渡):

描述
transition-property规定设置过渡效果的 CSS 属性的名称。(必设)all代表所有样式(少用)
transition-duration规定完成过渡效果需要多少秒或毫秒。(必设)
transition-timing-function规定速度效果的速度曲线函数。
transition-delay定义过渡效果何时开始。
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 之间的数值。

transform属性(重点)

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。参照点为元素左上角,个别除外。转换完会恢复原来的样子。
3d旋转规律:左手法则,大拇指为当前坐标轴的下方向,手指环绕的方向就是正方向。
可以为一个元素添加多个transform,但添加顺序要注意,因为转化需注意轴的变化引起的变化。

  • transform: none|transform-functions;
描述
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 缩放。1不会缩放,大于1.01放大,小于则缩小。只设一个值则等比例缩放
scale3d(x,y,z)定义 3D 缩放
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转,在参数中规定角度deg。 正数顺时针,负数逆时针。
rotate3d(x,y,z,angle)定义 3D 旋转。x代表x轴方向上的一个向量值,y、z也是如此,然后求出三个向量的对角线,再要对角线旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。 rotatex的旋转正方向是顺时针。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。rotatey的旋转正方向是逆时针。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。rotatez的旋转正方向是顺时针
skew(x-angle,y-angle)定义对象以其中心位置沿着 X 和 Y 轴的 2D 倾斜转换。会改变元素形状。在参数中规定某轴倾斜角度deg,如果角度为正,则往当前轴的负方向斜切,反之相反。先x轴后y轴斜切
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。
  • transform-origin: x-axis y-axis [z-axis]; 属性允许您改变被转换元素的位置。

x轴和y轴可设置为length数值 或 百分比 或top、left、right、bottom、center的组合。z轴只能设置为length数值。

  • transform-style 使被转化的子元素保留其3D转换,因为transform和transition变化后都会恢复原来样子。(在父元素中设置)
描述
float子元素将不保留其3D位置——平面方式
preserve-3d子元素将保留其3D位置——立体方式
  • perspective: number元素距离视图的距离,以像素计 | none默认值,与 0 相同,不设置透视; 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
注释:perspective 属性只影响 3D 转换元素。

  • perspective-origin: x-axis y-axis; 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性规定了镜头在平面上的的位置,默认放在元素中心。

可设置为length数值 或 百分比 或top、left、right、bottom、center的组合。

animation动画(关键帧动画,重点)

css3中的动画为关键帧动画,即告诉系统两个状态的不同,中间的补间动画系统完成。所以设置动画,主要设置的是关键帧。

  • @keyframes 规则(主要兼容添加前缀)设置关键帧

@keyframes animationname {keyframes-selector {css-styles;}}

描述
animationname必需。定义动画的名称。
keyframes-selector必需。动画时长的百分比。合法的值:0-100%;from(与 0% 相同),to(与 100% 相同)
css-styles必需。一个或多个合法的 CSS 样式属性。
@keyframes bianhua {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100% {
        background-color: green;
    }
}
  • animation 属性是一个简写属性,用于设置六个动画属性:

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

描述
animation-name规定需要绑定到选择器的 keyframe 名称。
animation-duration规定完成动画所花费的时间,以秒或毫秒计。 (必设)
animation-timing-function规定动画的速度曲线。ease默认,低速开始然后加快,减速结束;ease-in低速开始;ease-out低速结束;ease-in-out低速开始和结束;linear匀速;cubic-bezier(n,n,n,n)自定义。
animation-delay规定在动画开始之前的延迟。默认为0,单位s或ms。
animation-iteration-count规定动画应该播放的次数。默认为1,infinite为无限次。
animation-direction规定是否应该轮流反向播放动画。默认normal正常播放,alternate 动画应该轮流反向播放。

注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
steps(数值) 可以让过渡或动画(在animation-timing-function设置)分为指定的几次完成。

  • animation-play-state: paused规定动画已暂停 | running规定动画正在运行;

animation-play-state 属性规定动画正在运行还是暂停。

  • animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。

注释:其属性值是由逗号分隔的一个或多个填充模式关键词。
animation-fill-mode : none | forwards | backwards | both;

描述
none不改变默认行为。
forwards当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards在 animation-delay 所指定的一段时间内,在动画显示之前,立即应用开始属性值(在第一个关键帧中定义)。
both向前和向后填充模式都被应用。 即forwords和backwards都设置。

web字体(常用)

字体格式:TureType(.ttf)、OpenType(.otf)、Web Open Font Format(.woff)、Embedd Open Type(.eot)、SVG(.svg)。
上网下载(要填写这种字体的文字),使用类似于字体图标那样要声明。
http://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index

多列布局(用于文本)

  • column-count 属性规定元素应该被分隔的列数。
column-count: number|auto;
/*number元素内容将被划分的最佳列数。
*auto由其他属性决定列数,比如 "column-width"。
*/
  • column-gap 属性规定两列之间的间隔。
column-gap: length|normal;
/*length把列间的间隔设置为指定的长度。
*normal规定列间间隔为一个常规的间隔。
*/
  • column-rule 属性设置列之间的宽度、样式和颜色规则。(简写属性)
column-rule: column-rule-width column-rule-style column-rule-color;
描述
column-rule-width规定列之间的间隔线宽度规则。 thin纤细,medium中等,thick宽厚,length规定宽度。
column-rule-style规定列之间的间隔线样式规则。 none没有,hidden隐藏,dotted点状,dashed虚线,solid实线,double双线,groove、ridge、inset,outset 定义3D**效果,该效果取决于宽度和颜色值。 。
column-rule-color规定颜色规则
  • column-width 属性规定列的宽度。
column-width: auto|length;
/*auto由浏览器决定列宽。
*length	规定列的宽度。
*/
  • column-span 属性规定元素应横跨多少列。
column-span: 1|all;
/*1元素应横跨一列。
*all元素应横跨所有列。
*/

伸缩布局(重点)

版心一般设有mix-width或max-width。

1. display: flex;属性(伸缩布局中必设)

display: flex; 如果一个容器设置了这个属性,那么这个盒子里面的所有之间子元素都会自动的变成伸缩项(flex item)。

2. justify-content属性(重要)

justify-content 属性 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。flex-direction设置什么排列方式,那个方向就是主轴,它的相反垂直/水平则是侧轴。注意兼容。

**提示:**使用 align-content 属性对齐交叉轴上的各项(垂直)。

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
描述
flex-start默认值。项目位于容器的开头。
flex-end项目位于容器的结尾。
center项目位于容器的中心。
space-between项目位于各行之间留有空白的容器内。
space-around项目位于各行之前、之间、之后都留有空白的容器内。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。

3. flex-flow 属性(flex-direction 和 flex-wrap 属性的复合属性)

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性,即flex-flow 为简写属性。

  • flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
  • flex-direction 属性规定灵活项目的方向。
  • flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

**注意:**如果元素不是弹性盒对象的元素,则 flex-flow 属性不起作用。

flex-flow: flex-direction flex-wrap|initial|inherit;
flew-direction的取值描述
row默认值。灵活的项目将水平显示,正如一个行一样。 从左到右。
row-reverse与 row 相同,但是以相反的顺序。 从右到左。
column灵活的项目将垂直显示,正如一个列一样。 从上到下。
column-reverse与 column 相同,但是以相反的顺序。 从下到上。
initital
inherit从父元素继承该属性。
flex-wrap的取值描述
nowrap默认值。规定灵活的项目不拆行或不拆列。
wrap规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。

4. flex-grow 属性(扩展规则)

flex-grow 属性用于设置或检索弹性盒子的扩展比率
**注意:**如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作用。

flex-grow: number|initial|inherit;

number一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。 越大相对扩展越多。

5. flex-shrink 属性(收缩规则)

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

**注意:**如果元素不是弹性盒对象的元素,则 flex-shrink 属性不起作用。

flex-shrink: number|initial|inherit;

number一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。 越大相对收缩越多。

6. flew属性(flex-grow、flex-shrink和flex-basis的简写属性)

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
**注意:**如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。可只填一个数值,则默认只设置 flex-grow。

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
描述
flex-grow一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认是0
flex-shrink一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认是1
flex-basis项目的长度。合法值:“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。一般为不用设,取默认值。
auto与 1 1 auto 相同。
none与 0 0 auto 相同。
initial设置该属性为它的默认值,即为 0 1 auto。
inherit从父元素继承该属性。

align-items属性

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

**提示:**使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
描述
stretch默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。
center弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
flex-start弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界
flex-end弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的**侧轴结束边界。 **
baseline元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。(少用)

align-self 属性

**align-self 属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。 **

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

选项与align-self一样,在子元素中使用。

  • 1
    点赞
  • 0
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值