边框
border-radius
:为元素添加圆角边框,border-radius
属性是一个简写属性,用于设置四个 border-*-radius
属性;
border-radius: 10px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-radius: 10px 20px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 20px;
border-radius: 10px 20px 30px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;
box-shadow
:向框添加一个或多个阴影。
语法:box-shadow: 水平位移 垂直位移 [模糊半径 阴影尺寸 阴影颜色 inset(内部阴影)];
box-shadow: 10px 10px 5px #888888;
border-image
:设置边框图像,该属性是一个简写属性,用于设置以下属性:
border-image-source
:边框的图片的路径;border-image-slice
:图片边框向内偏移;border-image-width
:图片边框的宽度;border-image-outset
:边框图像区域超出边框的量;border-image-repeat
:图像边框是否应平铺(repeate
)、铺满(round
)或拉伸(stretch
)。
border-image: url(/i/border.png) 30 30 round;
背景
background-size
:背景图片的尺寸。
background-size: 100px 100px; /* 第一个值设置宽度,第二个值设置高度 */
background-size: 50% 50%; /* 以父元素的百分比来设置背景图像的宽度和高度 */
background-size: cover; /* 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域 */
background-size: contain; /* 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域 */
background-origin
:规定 background-position
属性相对于什么位置来定位。
background-origin: padding-box; /* 背景图像相对于内边距框来定位(默认值) */
background-origin: border-box; /* 背景图像相对于边框盒来定位 */
background-origin: content-box; /* 背景图像相对于内容框来定位 */
background-clip
:规定背景的绘制区域。
background-clip: padding-box; /* 背景被裁剪到内边距框 */
background-clip: border-box; /* 背景被裁剪到边框盒(默认值) */
background-clip: content-box; /* 背景被裁剪到内容框 */
渐变
linear-gradient()
:线性渐变。
语法:background: linear-gradient(方向, start-color, ..., last-color);
background: linear-gradient(red, blue); /* 省略方向默认从上到下 */
background: linear-gradient(to right, red , blue); /* 从左侧开始的线性渐变,从红色开始,转为蓝色 */
background: linear-gradient(to bottom right, red , blue); /* 从左上角到右下角的线性渐变 */
radial-gradient()
:径向渐变。
语法:background: radial-gradient(圆的类型 渐变的大小 at 渐变的位置, start-color, ..., last-color);
类型 | 值 |
---|---|
圆的类型 | ellipse (默认):椭圆形circle :圆形 |
渐变的大小 | farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边 |
渐变的位置 | center (默认):设置中间为径向渐变圆心的纵坐标值top :设置顶部为径向渐变圆心的纵坐标值bottom :设置底部为径向渐变圆心的纵坐标值 |
background: radial-gradient(red, yellow, green); /* 椭圆形渐变 */
background: radial-gradient(circle, red, yellow, green); /* 圆形渐变 */
background: radial-gradient(red 10%, green 50%, blue 100%); /* 颜色结点不均匀分布 */
background: radial-gradient(at 50% 50%, blue, green, yellow); /* 圆心在中间 */
background: radial-gradient(closest-side at 60% 55%, blue, green, yellow); /* 圆心在离左侧60%,离上侧50%的地方,半径长度为从圆心到离圆心最近的边 */
文本效果
word-break
:定义如何换行。
值 | 含义 |
---|---|
normal | 使用浏览器默认的换行规则 |
break-all | 允许在单词内换行 |
keep-all | 只能在半角空格或连字符处换行 |
word-wrap
:允许长的内容可以自动换行。
值 | 描述 |
---|---|
normal | 只在允许的断字点换行(浏览器保持默认处理) |
break-word | 在长单词或 URL 地址内部进行换行 |
text-overflow
:指定当文本溢出包含它的元素,应该发生什么。
值 | 描述 |
---|---|
clip | 修剪文本 |
ellipsis | 显示省略符号来代表被修剪的文本 |
string | 使用给定的字符串来代表被修剪的文本(只在 Firefox 浏览器下有效) |
text-shadow
:文字阴影。
语法:text-shadow: 水平位移 垂直位移 [模糊半径 阴影颜色];
转换
transform
:应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
语法:transform: none(默认)|transform-functions;
transform-origin
:允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。
语法:transform-origin: x-axis y-axis z-axis;
轴 | 值 |
---|---|
X轴 | left center right length (如100px )% (如0% ) |
Y轴 | top center bottom length (如100px )% (如0% ) |
Z轴 | length (如100px ) |
transform-origin: 0% 0%; /* 将元素左上角设为旋转点 */
transform-style
:指定嵌套元素是怎样在三维空间中呈现。
值 | 含义 |
---|---|
flat | 所有子元素在2D平面呈现 |
preserve-3d | 所有子元素在3D空间中呈现 |
2D转换方法
rotate(angle)
:定义 2D 旋转,在参数中规定角度。
translate(x,y)
:指定元素在二维空间中的位移。X轴方向向右,Y轴方向向下。
translateX(n)
:指定元素在X轴中的位移。
translateY(n)
:指定元素在Y轴中的位移。
scale(n)
:定义 2D 缩放转换。
transform: scale(2); /* 放大两倍 */
scaleX(n)
:定义 X 轴方向的缩放转换。
scaleY(n)
:定义 Y 轴方向的缩放转换。
matrix(a,b,c,d,e,f)
:定义 2D 转换,使用六个值的矩阵。
值 | 含义 |
---|---|
a | 水平缩放 |
b | 水平倾斜 |
c | 垂直倾斜 |
d | 垂直缩放 |
e | 水平移动 |
f | 垂直移动 |
transform: matrix(2, 1, 0, 2, 50, 50); /* 水平放大两倍,水平倾斜,垂直放大两倍,水平向左移动50%,垂直向下移动50% */
skew(x-angle,y-angle)
:定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)
:定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)
:定义沿着 Y 轴的 2D 倾斜转换。
3D转换方法
perspective(n)
:为 3D 转换元素定义透视视图。
值 | 描述 |
---|---|
number | 元素距离视图的距离,以像素计。 |
none | 默认值。与 0 相同。不设置透视。 |
translate3d(x,y,z)
:指定元素在三维空间中的位移。X轴方向向右,Y轴方向向下,Z轴方向向你。
translateX(x)
:指定元素在X轴中的位移。
translateY(y)
:指定元素在Y轴中的位移。
translateZ(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 旋转。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
:定义 3D 转换,使用 16 个值的 4x4 矩阵。
过渡
transition
:设置元素当过渡效果,四个简写属性为:
-
transition-property
:过渡属性名。
语法:transition-property: none|all| property;
-
transition-duration
:规定完成过渡效果需要花费的时间(以秒或毫秒计)。transition-duration: 0.5s; /* 相当于 */ transition-duration: 500ms;
-
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 之间的数值。 |
cubic-bezier(x1,y1,x2,y2)
:贝塞尔曲线,是控制变化的速度曲线。
从上图中我们可以看到,cubic-bezier
有四个点:
两个默认的,即:P0(0,0)
,P3(1,1)
;
两个控制点,即:P1(x1,y1)
,P2(x2,y2)
;
注:X轴的范围是0~1
,超出cubic-bezier
将失效,Y轴的取值没有规定,但是也不宜过大。
我们只要调整两个控制点P1
和P2
的坐标,最后形成的曲线就是动画曲线。
transition-delay
:指定何时将开始切换效果。transition-delay: 0.5s; /* 等待0.5秒后过渡效果才开始 */ /* 相当于 */ transition-delay: 500ms;
动画
animation
:为元素添加动画,是一个简写属性。
语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name
:为@keyframes
动画名称。animation-duration
:动画指定需要多少秒或毫秒完成。animation-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 之间的数值。 |
animation-delay
:设置动画在启动前的延迟间隔,可以是秒或毫秒。animation-iteration-count
:定义动画的播放次数。
值 | 描述 |
---|---|
n | 一个数字,定义应该播放n 次动画 |
infinite | 指定动画应该播放无限次(永远) |
animation-direction
:指定是否应该轮流反向播放动画。
值 | 描述 |
---|---|
normal | 默认值。动画按正常播放。 |
reverse | 动画反向播放。 |
alternate | 动画在奇数次(1、3、5... )正向播放,在偶数次(2、4、6... )反向播放。 |
alternate-reverse | 动画在奇数次(1、3、5... )反向播放,在偶数次(2、4、6... )正向播放。 |
animation-fill-mode
:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。该属性可重写该行为。
值 | 描述 |
---|---|
none | 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 |
forwards | 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。 |
backwards | 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 “normal ” 或 “alternate ” 时)或 to 关键帧中的值(当 animation-direction 为 “reverse ” 或 “alternate-reverse ” 时)。 |
both | 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。 |
animation-play-state
:指定动画是否正在运行或已暂停。
值 | 描述 |
---|---|
paused | 指定暂停动画 |
running | 指定正在运行的动画 |
@Keyframes
规则:使用@keyframes
规则,你可以创建动画。
语法:@keyframes animationname {keyframes-selector {css-styles;}}
值 | 说明 |
---|---|
animationname | 必需的。定义animation 的名称。 |
keyframes-selector | 必需的。动画持续时间的百分比。 合法值: 0-100% from (和0% 相同)to (和100% 相同)注意: 您可以用一个动画 keyframes-selectors 。 |
css-styles | 必需的。一个或多个合法的CSS样式属性 |
@keyframes mymove {
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}