CSS3 新特性

原创
2017/10/10 21:05
阅读数 44

CSS3 有哪些新特性?

简化:选择器、RGBA、阴影、盒模型、边框圆角、边框图片、渐变、背景、变换、过渡、动画、列布局、伸缩布局、媒体查询

  • 1、css3 选择器:

属性选择器:E[attr]、E[attr=val]、E[attr*=val]、E[attr^=val]、E[attr$=val]; 伪类选择器:E:only-of-type、E:only-child、E:first-child、E:last-child、E:nth-child(n)、E:nth-last-child(n)、E:nth-of-type(n)、 E:nth-last-of-type(n){n 范围[0,+∞),即所有子元素,0 和负数在伪类选择器中获取不到;-n+5 表示[1,5]}、E:empty、E:target、E:enabled、 E:disabled 控制表单控件的禁用状态、E:checked 单选框或复选框被选中 伪元素选择器:E::befor、E::after、E::first-letter、E::first-line、E::selection(c3 引入)

  • 2、颜色:

[ 面试]RGBA:该透明度 Alpha 不会被继承,区别于不透明度 opacity HSLA:Hue( 色 调 ), 0( 或 360) 表 示 红 色 ,120 表 示 绿 色 ,240 表 示 蓝 色 , 取 值 0 - 360;Saturation( 饱 和 度 ), 取 值 0.0% - 100.0%;Lightness(亮度),取值 0.0% - 100.0%;Alpha 透明度,取值 0~1.

  • 3、文本阴影:

text-shadow:none | <shadow> [ , <shadow> ]* 可以多阴影,逗号隔开 <shadow> = <length>{2,3} && <color>? {Xoffset 可负、Yoffset 可负、blur 不可负}、颜色

  • 4、盒模型:

box-sizing:content-box(标准模式盒模型) | border-box(怪异模式盒模型)

  • 5、盒子阴影:

box-shadow:none | <shadow> [ , <shadow> ]* 可以有多个阴影 <shadow> = inset? && <length>{2,4} && <color>? 内阴影、{Xoffset 可负、Yoffset 可负、blur 不可负、外延可负}、颜色

  • 6、边框圆角:

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? 按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角

  • 7、边框图片:

border-image:<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '> source:图像路径 url [ 面试]slice:内偏移(分割方式) [ <number> | <percentage> ]{1,4} && fill?指定从上,右,下,左方位来分隔图像,将图像分成 4 个角,4 条边 和中间区域共 9 份,中间区域始终是透明的(即没图像填充),加上关键字 fill 后按 border-image-repeat 设定填充 数羊战队 20 width:边框厚度,将裁切的图片缩放至设定厚度,然后在边框中显示,超出 border-width 部分不显示 outset:扩张,设置后图像在原本基础上向外延展设定值后再显示,不允许负值(少用) repeat:平铺,默认 stretch 拉伸;repeat 平铺但不缩放;round 平铺且自适应缩放大小;space 平铺且自适应缩放间距

  • 8、渐变:

线性渐变 linear-gradient:( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 径向渐变 radial-gradient:([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+) 注意:渐变色不是单一颜色,不能使用 backgroud-color 设置,只能使用 background 设置 间隔分明实现,red 0%,red 33.3%,green 33.3%,green 66.6%,blue 66.6%,blue 100% [ 面试]径向渐变中的 size:渐变终止的地方(要能看到明显的起点终点来判定是哪种,默认最远角) closest-side:最近边、farthest-side:最远边、closest-corner:最近角、farthest-corner:最远角

  • 9、背景:

background-size:auto/number/percentage/cover/contain cover 自动等比缩放,直到某方向完全显示;contain 自动等比缩放,直到图片完全显示 [ 面试]移动端实现较小图片拥有较大响应区:下面连个属性都设置成 context-box,配合 padding 值增大响应区 background-origin:padding-box/border-box/content-box; 设置定位原点 background-clip: padding-box/border-box/content-box; 设置显示区域

  • 10、过渡:

transition: property duration timing-function delay; 过渡属性(必要,全属性为 all)、过渡时间(必要)、过渡曲线(常用 linear 匀速)、延时事件

  • 11、变换:

坐标轴:x 向右为正,y 向下文正,z 向屏幕外为正 3D 变换比 2D 变换相比:多个 Z 轴,合写语法需要写上默认值,此处不做详细说明 translate 平移:正值向坐标轴正向平移,负值向坐标轴反向平移;默认参考元素左上角 scale 缩放:比值,1 为不缩放,>1 为放大,<1 为缩小;默认参考元素中心点 rotate 旋转:正向面对某坐标轴,正值为顺时针旋转,负值为逆时针旋转;默认参考元素中心点 skew 斜切/翻转/扭曲(2D 独有):正值向坐标轴正向拉伸,默认元素中心点固定,拉伸右下角点,面积保持不变进行扭曲 transform-origin 改变参考点

  • 12、动画

定义:@keyframes 动画序列{ 关键帧{ 属性:目标值 } .... } 关键帧可以用 from to 关键字,也可以用百分比 引用:animation: 动画序列名 持续时间 过渡类型 延迟时间 循环次数 是否反向 动画之外状态 过渡类型 animation-timing-function: linear | ease-in-out | steps(n); 实现步进,此时动画不连续 循环次数 animation-iteration-count:n | infinte; 可设定具体次数或无限循环 [ 面试]动画外状态 animation-fill-mode: forwards | backwords | both; 说明:forwards 在动画结束后保持最后状态(100%状态),backwords 会在延迟开始之前先执行最初状态(0%状态,无延迟 时,没有明显效果),both 会存在上述两种情况 是否反向 animation-direction: alternate 交替 | reverse 反向 | normal 正常 常用简写:animation: move 5s [2s] linear infinite [alternate]

  • 13、列布局:

column-count:列数、column-width:列宽、column-gap:列间隙、column-span:跨列列数、column-rule:列间样式 [ 面试]列高度的平衡:如果设定列的最大高度,这个时候,文本内容会从第一列开始填充,然后第二列,第三列,造成多列,列数会发生 改变.(所以列高可以大于分列后的默认高度,但不要小于)

  • 14、伸缩布局:

父盒子属性设定: 数羊战队 21 display:flex; 设置给父容器盒子,子元素都会自动的变成伸缩项(flex item) justify-content 设置主轴方向的子元素对齐方式,常设 center 实现居中(默认水平居中) align-items 设置侧轴方向的子元素对齐方式,常设 center 实现居中(默认垂直居中) flex-direction 定义弹性盒子元素的排列方向(主轴);row 水平主轴、column 垂直主轴 flex-wrap 控制 flex 容器是单行或者多行;nowrap 单行,wrap 多行 子元素属性设定: flex:flex-grow、flex-shrink、flex-basis 的简写,默认值为 0 1 auto flex-grow:默认值是 0,保持 CSS 设定尺寸,设置后平分剩余空间,加在 css 设定尺寸上 flex-shrink :默认值是 1,一起缩小,设为 0 则保持 CSS 设定,设置后平分溢出部分,减在 css 设定尺寸上

  • 15、媒体查询

查询到当前屏幕的宽度,针对不同的屏幕宽度设置不同的样式来适应不同屏幕.重置浏览器大小时,页面也会根据浏览器的 宽度和高度重新渲染页面. @media screen [not|only]? and (media feature) { CSS-Code; } media feature :max(min)-height (width),为了实现向上兼容,常用 min-width,从小写到大 媒体查询调用不同 css 文件:<link rel="stylesheet" media=" screen and|not|only (media feature)" href="mystylesheet.css">

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部