CSS3新增了哪些特性?

2023-05-28 0 187

1、有效性

rgba和opacity都能增设透明化的。

rgba(red, green, blue, alpha):alpha是0-1有效性,0时色调为全然透明化,1是全然不透明化。

opacity:index:index是0-1,增设整座原素的有效性。

二者差别:rgba是增设原素的手写体或大背景色调加了有效性,其它式样不受负面影响,opacity是负面影响整座原素包涵其父原素单厢增设有效性。

2、梯形

border-radius:为原素加进梯形前面板,border-radius能缩写也能依次增设。与margin增设类似于,能增设两个值(则表示五个梯形)、三个值(第二个是右上角左下角,第二个值是右上角右上角)、四个值(第二个值是右上角,第二个值是右上角和右上角,第二个值是左下角)。

border-radius: 10px; /* 同构于 */ border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;

3、RICOH

追加RICOH增设能缩写,也能合二为一原则上增设。追加优点及象征意义:

background-image /*增设左上方路径(相较和相较路径)*/background-repeat /*左上方与否多次重复,repeat-x水准路径多次重复;repeat-y垂直路径多次重复;no-repeat不多次重复;默认情况下三个路径都多次重复*/background-position /*左上方对齐方式,默认是右上角;(100% 0)right top增设到右上角;(100% 100%)right bottom增设到左下角;(0 100%)left bottom增设到右上角;0 0(left top)增设到右上角;center center 水准和垂直路径都居中 */background-attachment /*左上方是固定还是滚动。fixed固定左上方;scroll跟随页面滚动*/background-size RICOH的尺寸。backgroun-origin 规定background-position优点相较于什么位置来定位。background-clip 规定大背景的绘制区域。

4、阴影

box-shadow:给原素加进阴影。

语法:box-shadow:水准偏移 垂直偏移 [ 模糊半径 阴影尺寸 阴影色调 inset(内部阴影) ]

text-shadow:给文字加阴影。

语法:text-shadow:水准偏移 垂直偏移 [ 模糊半径 阴影尺寸 阴影颜色 inset(内部阴影) ]

5、渐变

渐变有两种:线性渐变和径向渐变。

线性渐变:从某个路径或角度开始定义渐变

线性渐变语法(使用路径):background-image: linear-gradient(direction, color-stop1, color-stop2, …);

direction不增设的时候默认从上到下,能增设的路径优点值有to bottom、to top、to right、to left、to bottom right。

线性渐变语法(使用角度):background-image: linear-gradient(angle, color-stop1, color-stop2, …);

angle角度增设时 数字加deg。

径向渐变:从中心开始定义渐变

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

6、转换

css3的转换能对原素进行伸缩、缩放、旋转、移动等。转换可分为2D转换和3D转换。

2D转换有scale(缩放)、rotate(旋转)、translate(移动)、skew(沿x或y轴旋转)、matrix缩写各种2D转换。

translate(x,y):指定原素在二维空间中的位移。X轴路径向右,Y轴路径向下。translateX(n):指定原素在X轴中的位移。translateY(n):指定原素在Y轴中的位移。scaleX(n):定义 X 轴路径的缩放转换。scaleY(n):定义 Y 轴路径的缩放转换skew(x-angle,y-angle):定义沿着 X 和 Y 轴的 2D 倾斜转换。skewX(angle):定义沿着 X 轴的 2D 倾斜转换。skewY(angle):定义沿着 Y 轴的 2D 倾斜转换。

matrix 方法有六个参数,包涵旋转,缩放,移动(平移)和倾斜功能。

实例: 利用matrix()方法旋转div原素30° 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 */ 3D转换

3D转换

translated3d(x,y,z):指定原素在三维空间的位移。translatedX(x) :指定原素在x轴中的位移。translatedY(y) :指定原素在y轴中的位移。translatedZ(z) :指定原素在z轴中的位移。scale3d(x,y,z):定义 3D 缩放转换。scaleX(x):通过增设 X 轴的值来定义缩放转换。scaleY(y):通过增设 Y 轴的值来定义缩放转换。scaleZ(z):通过增设 Z 轴的值来定义缩放转换。rotate3d(x,y,z,angle):定义 3D 旋转。rotateX(x):定义沿着 X 轴的 3D 旋转。rotateY(y):定义沿着 Y 轴的 3D 旋转。rotateZ(z):定义沿着 Z 轴的 3D 旋转。

7、过渡

transition :增设原素要过渡的效果,总共有五个优点,可缩写。

transition-property:规定应用过渡的 CSS 优点的名称。transition-duration:定义过渡效果花费的时间。默认是 0。transition-timing-function :规定过渡效果的时间曲线。默认是 “ease”。transition-delay:规定过渡效果何时开始。默认是 0。

可缩写为:

transition: property duration timing-function delay;

8、动画

animate:为原素加进动画,是两个缩写优点。也能拆分增设。

animation-name:规定动画名称animation-duration:规定两个动画周期所花费的时长ms或s为单位。animation-timing-function:规定动画的速度曲线。animation-fill-mode:规定动画不播放时的原素式样。animation-delay:规定动画延迟多久执行。animation-iteration-count:动画播放次数。animation-direction:规定动画下一期与否逆向播放。animation-paly-state:动画运行状态。

可缩写为:

animation: name duration timing-function delay iteration-count paly-state;

9、文本效果

word-break:定义如何换行。优点值有normal(浏览器默认换行规则)、break-all(允许在单词内换行)、keep-all(只能在半角空格或连字符处换行)。

word-wrap:允许长的内容能自动换行。优点值有normal,break-word。

text-overflow :指定文本溢出包涵他的原素,应该发生什么。优点值有clip(修剪文本)、ellipsis(显示省略号)、string(给定的字符串来代表被修剪的文本)。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务