CSS__精简__属性与函数

多媒体

background
图片背景
语法:color/image/repeat/attachment/position

例子:background: #ffffff url('tree.png') no-repeat right top;

background-color

背景色

background-image

填充图像

background-position

图像位置的操作方法

background-clip

绘制图像

border-box

裁剪到边框盒

padding-box

裁剪到内边距框

content-box

裁剪到内容框

background-origin

放置图片

pading-box

相对于内边距框来定位

border-box

相对于边框盒来定位

content-box

相对于内容框来定位

background-size

图像尺寸

length

背景图像的(高度,宽度)

percentage

百分比

cover

图像覆盖背景区域

contain

图像扩展至最大尺寸(自动适应)

background-blend-mode

图像的混合模式(设置每个背景图层(颜色/图像)的混合模式)

normal

默认

multiply

screen

屏幕

overlay

覆盖

lighten

变亮

color-dodg

颜色减淡

saturation

饱和度

color

颜色

luminosity

亮度

backface-visibility

图像背面可见否(设置图像的背面的显示或隐藏方法)

visible

显示图像背景

hidden

隐藏图像背景

background-repeat

重复图像的方法(设置水平或垂直方向都重复图片)

repeat

垂直和水平方向重复

repeat-x

垂直和水平方向重复

repeat-y

垂直方向重复

no-repeat

背景图像将仅显示一次

inherit

继承

image-rendering

图片高质量缩放

auto

默认值,高质量

crisp-edges

处理的图片缩小时的算法类型,对小图放大不起作用

pixelated

缩小图像时,算法与 auto 相同(放大不做模糊处理)

object-fit

视频/图片(长宽比)

详情:规定替换元素的内容应如何适合其所用高度和宽度建立的框。(适合img/video标签)

fill

默认值。调整替换后的内容大小,以填充元素的内容框。如有必要,将拉伸或挤压物体以适应该对象。

contain

缩放替换后的内容以保持其纵横比,同时将其放入元素的内容框。

cover

调整替换内容的大小,以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。

scale-down

调整内容大小就像没有指定内容或包含内容一样

object-position

指定替换元素在其框内的对齐方式

详情:object-position 属性与 object-fit 一起使用,可规定应如何在其“自己的内容框”内使用 x/y 坐标定位 img 或 video

文本

text-align
文本对齐
left左对齐
right右对齐
center居中对齐
direction
文本方向
vertical-align

垂直对齐

sub

垂直对齐文本的下标

super

垂直对齐文本的上标

top

把元素的顶端与行中最高元素的顶端对齐

text-top

把元素的顶端与父元素字体的顶端对齐

middle

把此元素放置在父元素的中部

bottom

把元素的顶端与行中最低的元素的顶端对齐

text-bottom

把元素的底端与父元素字体的底端对齐

%

使用'line-height'属性的百分比值来排列此元素。允许使用负值

inherit

继承

text-decoration

装饰(设置文本装饰的样式)

none

常用于从链接上删除下划线

overline

上划线

line-through

删除线

underline

下划线

text-decoration-color

文本装饰颜色

text-decoration-line

文本装饰类型

none

没有线条

underline

文本下方显示线条

overline

文本上方显示线条

line-through

显示横穿文本的线条

initial

默认值

inherit

继承

text-decoration-style

文本装饰中的行样式

solid

默认值。线条显示为单行

double

双线

dotted

点线

dashed

虚线

wavy

波浪线

initial

默认值

inherit

继承

text-transform

字母转换

capitalize

每个单词以大写字母开头

uppercase

大写字母

lowercase

小写字母

inherit

继承

text-indent

文本缩进(用于指定文本第一行的缩进)

letter-spacing

文本间距(用于指定文本中字符之间的间距)

line-height

文本行高(用于指定行之间的间距)

text-shadow

文本阴影

语法:text-shadow: h-shadow v-shadow blur color;

h-shadow

必须,水平阴影的位置,允许负值

v-shadow

垂直...

blur

可选,模糊的距离

color

可选,阴影的颜色

text-overflow

文本溢出

clip

修剪文本

ellipsis

显示省略符号来代表被修建的文本

string

使用给定的字符串来代表被修剪的文本

text-justify

文本对齐方式(IE有效)

word-wrap

文本换行

normal

只在允许的断字点换行(浏览器保持默认处理)

break-word

在长单词或 URL 地址内部进行换行(防止单词过长溢出,对长单词进行换行)

word-break

文本折行

normal

使用浏览器默认的换行规则

break-all

允许在单词内换行

keep-all

只能在半角空格或连字符处换行

word-spacing

文字间距

white-space

空白处理

详情:属性指定元素内部空白的处理方式(如:禁用元素内的文本换行)

pre

空白会被浏览器保留

nowrap

文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止

pre-wrap

保留空白符序列,但是正常地进行换行

pre-line

合并空白符序列,但是保留换行符

inherit

继承

writing-mode

布局方式(规定文本行是水平还是垂直布局)

user-select

选取模式

auto

默认。如果浏览器允许,则可以选择文本

none

防止文本选取

text

文本可被用户选取

all

单击选取文本,而不是双击

unicode-bidi

设置或返回文本是否被重写

list-style

列表样式(列表添加图像)

none

无标记

disc

默认。标记是实心圆

circle

标记是空心圆

square

实心方块

decimal

标记是数字

decimal-leading-zero

0开头的数字标记。(01, 02, 03, 等。)

lower-roman

小写罗马数字(i, ii, iii, iv, v, 等。)

upper-roman

大写罗马数字(I, II, III, IV, V, 等。)

lower-alpha

小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

upper-alpha

大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

lower-greek

小写希腊字母(alpha, beta, gamma, 等。)

upper-latin

大写拉丁字母(A, B, C, D, E, 等。)

hebrew

传统的希伯来编号方式

armenian

传统的亚美尼亚编号方式

georgian

传统的乔治亚编号方式(an, ban, gan, 等。)

cjk-ideographic

简单的表意数字

hiragana

标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)

katakana

标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)

hiragana-iroha

标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)

katakana-iroha

标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

list-style-type

属性指定列表项标记的类型

list-style-image

指定图像为列表项标记

list-style-position

调整项目符号位置

inside

列表项目标记放置在文本以内,且环绕文本根据标记对齐

outside

默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐

inherit

规定应该从父元素继承 list-style-position 属性的值

字体

font
font简写属性
font-family

字体类型

详情:属性应包含多个字体名称作为“后备”系统,以确保浏览器/操作系统之间的最大兼容性

例子:font-family: 'Times New Roman', Times, serif;

font-face

字体引入

例子:

@font-face {

        font-family: myFirstFont;

        src: url(sansation_light.woff); 

}

font-weight

字体加粗

边框

border

外边框

border-style

边框样式

dotted

点线

dashed

虚线

solid

实线

double

双边

groove

3D坡口边框

ridge

3D脊线边框

inset

3D inset

outset

3D outset

hidden

隐藏

border-width

边框的宽度

boder-collapse

表格合并为单一边框

border-image

边框图片(图片载入设置为边框样式)

border-image-outset

边框图像区域超出边框的量

length

数量

number

对应的 border-width 的倍数

border-image-repeat

边框图像设置重复/圆角/拉伸

stretch

拉伸图像来填充区域

repeat

平铺(重复)图像来填充区域

round

类似repeat值,如果无法完整平铺所有图像,则对图像进行缩放以适应区域

border-image-slice

裁剪边框图像

border-image-source

边框图像地址(载入图片文件的地址,显示为边框样式)

border-image-width

边框图像的宽度

border-spacing

表格单元格边框之间的距离

border-color

边框的颜色

border-radius

圆角边框

outline

外边框

outline-style

外边框样式

dotted

点线

dashed

虚线

solid

实线

double

双边

groove

3D坡口边框

ridge

3D脊线边框

inset

3D inset

outset

3D outset

hidden

隐藏

outline-color

外边框颜色

outline-width

外边框宽度

outline-offset

边框之间的距离

详情:属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的

排版

flex

弹性盒排版

详情:flex 简写属性(flex-grow、flex-shrink 以及 flex-basis 属性的简写属性)

语法:flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> 

grid
格子盒排版
语法:template-rows/template-columns/template-areas/auto-rows/auto-columns/auto-flow
box-sizing

固定盒子

详情:(元素的宽度和高度的计算方式:它们是否应包含内边距和边框)
width

宽度

height

高度

min-width

最小宽度

min-height

最小高度

display

布局方式

详情:用于控制布局的最重要的 CSS 属性

none

none 此元素不会被显示

block

此元素将显示为块级元素,此元素前后会带有换行符

inline

默认。此元素会被显示为内联元素,元素前后没有换行符。

inline-block

行内块元素

run-in

非推荐

table

非推荐

inline-table

非推荐

table-row-group

非推荐

table-header-group

非推荐

table-footer-group

非推荐

table-row

非推荐

table-column-group

非推荐

table-column

非推荐

table-cell

非推荐

table-caption

非推荐

inherit

继承

flex-grow

弹性项目的几倍放大

详情:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink

弹性项目的几倍缩小

详情:

项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

flex-basis

flex项目的初始长度

详情:flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

语法:flex-basis: <length> | auto; /* default auto */

注释:它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

flex-flow

flex-direction 和 flex-wrap 的简写属性

flex-direction

弹性项目的方向

flex-wrap

规定弹性项目是否应该换行

justify-content

【水平对齐】项目在主轴上的对齐方式

flex-start(默认值)

左对齐

flex-end

右对齐

center

居中

space-between

两端对齐,项目之间的间隔都相等。

space-around

每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

align-items

【垂直对齐】项目在交叉轴上如何对齐

flex-start

交叉轴的起点对齐

flex-end

交叉轴的终点对齐

center

交叉轴的中点对齐

baseline

项目的第一行文字的基线对齐

stretch

默认值。

如果项目未设置高度或设为auto,将占满整个容器的高度。

align-content
多根轴线的对齐方式。

详情:如果项目只有一根轴线,该属性不起作用,仅对齐flex线,

flex-wrap使用后的进一步修改

flex-start

与交叉轴的起点对齐。

flex-end

与交叉轴的终点对齐。

center

与交叉轴的中点对齐。

space-between

与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around

每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch

默认值。轴线占满整个交叉轴

order

弹性项目的排列顺序,数值越小,排列越靠前,默认为0

align-self

用于弹性项目(单独调整位置)

grid-template-rows

行尺寸

grid-template-columns

列尺寸

grid-template-areas
网格布局排版方式
grid-auto-rows

行的自动尺寸,并设置 grid-template-rows 属性

grid-auto-columns

列的自动尺寸,并设置 grid-template-coumns 属性

grid-gap

行列之间的间距

grid-row-gap

行间距

grid-column-gap

列间距

边距

margin

外边距

auto

浏览器计算外边距

length

(px,em,cm...)

%

百分比

inherit

从父元素继承外边距

padding

内边距

样式

box-decoration-break

元素分段

详情:属性规定当元素框被分段时,如何应用元素

slice

默认。框装饰作为整体应用于元素,并在元素片段的边缘断裂。

clone

框装饰适用于元素的每个片段,就像片段是单个元素一样。

initial

将此属性设置为其默认值。

inherit

从其父元素继承此属性

box-shadow

元素添加阴影样式

语法:box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊距离。

spread

可选。阴影的尺寸。

color

可选。阴影的颜色。请参阅 CSS 颜色值。

inset

可选。将外部阴影 (outset) 改为内部阴影。

box-reflect

元素添加倒影样式

语法:box-reflect/offset/mask-box-image

direction

定义方向,取值包括 above 、 below 、 left 、 right

offset

定义反射偏移的距离,取值包括数值或百分比,其中百分比根据对象的尺寸进行确定。默认为0。

mask-box-image

定义遮罩图像,该图像将覆盖投影区域。如果省略该参数值,则默认为无遮罩图像。

caret-color

光标颜色

详情:规定光标在 input、textarea 或任何可编辑元素中的颜色
clip

剪裁元素

shape

设置元素的形状。唯一合法的形状值是:rect (top, right, bottom, left)

auto

默认值

inherit

继承

clip-path

裁剪形状

详情:将元素裁剪为基本形状或 SVG 源(clip-path 将替代废弃的 clip 属性。)

clip-source

指向 SVG clipPath 元素的 URL。

basic-shape

把元素剪裁为基础形状:圆、椭圆、多边形或星形。

margin-box

用 margin box 作为引用框。

border-box

使用 border box 作为引用框。

padding-box

使用 padding box 作为引用框。

content-box

使用 content box 作为引用框。

fill-box

利用对象边界框(object bounding box)作为引用框。

stroke-box

使用笔触边界框(stroke bounding box)作为引用框。

view-box

使用 SVG 视口作为引用框。

none

默认值。不创建的剪切路径。

filter

图像效果,元素显示之前的效果(例如,模糊或颜色偏移)。

语法:filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

blur(px)

模糊

brightness(%)

亮度

contrast(%)

对比度

drop-shadow(h-shadow v-shadow blur spread color)

阴影

grayscale(%)

转换为灰阶

hue-rotate(deg)

色相旋转 0deg,代表原始图像。

invert(%)

反转图像中的样本

opacity(%)

不透明度

saturate(%)

设置图像的饱和度

sepia(%)

转换为棕褐色

url()

函数接受规定 SVG 滤镜的 XML 文件的位置,并且可以包含指向特定滤镜元素的锚点

initial

默认值

inherit

继承

counter-increment

编号码

详情:属性设置某个选取器每次出现的计数器增量。默认增量是 1(对部分和子部分进行编号(比如 'Section 1'、'1.1'、'1.2')的方法属性:counter-reset 配合使用)

none

默认。选择器无计数器增量

idNumber

id 将增加计数的选择器、id 或 class/number 增量。number 可以是正数、零或者负数。

inherit

规定应该从父元素继承 counter-increment 属性的值

quotes

编号标记

详情:属性设置嵌套引用(embedded quotation)的引号类型。(注释:配合q标签短引用)

语法:string string string string 要使用的引号

例子:

css:quotes: '#'  '?'  ’《‘ '》'

html:<p><q>This is a <q>big</q> page</q></p>

运行:#This is a 《big》page?

cursor

光标样式,规定当指向元素时要显示的鼠标光标

url

需使用的自光标的 URL。

default

默认光标(通常是一个箭头)

auto

默认。->浏览器设置的光标。

crosshair

光标呈现为十字线。

pointer

光标呈现为指示链接的指针(一只手)

move

此光标指示某对象可被移动。

e-resize

此光标指示矩形框的边缘可被向右(东)移动。

ne-resize

此光标指示矩形框的边缘可被向上及向右移动(北/东)。

nw-resize

此光标指示矩形框的边缘可被向上及向左移动(北/西)。

n-resize

此光标指示矩形框的边缘可被向上(北)移动。

se-resize

此光标指示矩形框的边缘可被向下及向右移动(南/东)。

sw-resize

此光标指示矩形框的边缘可被向下及向左移动(南/西)。

s-resize

此光标指示矩形框的边缘可被向下移动(南)。

w-resize

此光标指示矩形框的边缘可被向左移动(西)。

text

此光标指示文本。

wait

此光标指示程序正忙(通常是一只表或沙漏)。

help

此光标指示可用的帮助(通常是一个问号或一个气球)。

opacity

不透明度设置

overflow

内容溢出设置

visible

默认值。内容不会被修剪,会呈现在元素框之外

hidden

内容会被修剪,并且其余内容是不可见的

scroll

内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit

规定应该从父元素继承 overflow 属性的值。

overflow-x

内容溢出左右边缘设置

visible

不裁剪内容,可能会显示在内容框之外。

hidden

不裁剪内容,可能会显示在内容框之外。

scroll

裁剪内容 - 提供滚动机制

auto

如果溢出框,则应该提供滚动机制

no-display

如果内容不适合内容框,则删除整个框

no-content

如果内容不适合内容框,则隐藏整个内容

visibility

规定元素是否可见

详情:不可见的元素也会占据页面上的空间

visible

默认值。元素是可见的。

hidden

元素是不可见的。

collapse

当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 'hidden'

inherit

继承

动画

animation

动画简写

语法:name/duration/timing-function/delay/iteration-count/direction

例子:animation:mymove 5s infinite

animation-direction

动画模式(向前播放、向后播放还是交替播放)

animation-fill-mode

动画样式(不播放动画时(在开始之前、结束之后、或同时)的样式)

animation-iteration-count

动画播放次数

info

播放次数

infinite

无限次数

animation-name

@keyframes 名称

animation-play-state

动画播放还是暂停

paused

已暂停

running

正在播放

animation-timing-function

动画速度曲线

linear

匀速运动

ease

低速开始->加快->结束前变慢。

ease-in

低速开始

ease-out

低速结束

ease-in-out

低速开始和结束

cubic-bezier

0 到 1 的数值

@keyframes

规定动画代码

特效

transform

元素转换简写(transform 向元素应用 2D 或 3D 转换)

matrix

2D 转换,使用六个值的矩阵 matrix(n,n,n,n,n,n)

matrix3d

3D 转换,使用六个值的矩阵 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

translate

2D 转换 translate(x,y)2D

translate3d

3D 转换 translate3d(x,y,z)

translateX

转换,只是用 X 轴的值 translateX(x)

translateY

转换,只是用 Y 轴的值 translateY(y)

translateZ

3D转换,只是用 Z 轴的值 translateZ(z)

scale

2D缩放 scale(x,y)

scale3d

3D 缩放 scale3d(x,y,z)

scaleX

通过设置 X 轴的值来缩放转换 scaleX(x)

scaleY

通过设置 Y 轴的值来缩放转换 scaleY(y)

scaleZ

通过设置 Z 轴的值来 3D 缩放转换 scaleZ(z)

rotate

旋转元素 rotate(angle)

rotate3d

旋转3D元素 rotate3d(x,y,z,angle)

rotateX

沿着 X 轴的 3D 旋转 rotateX(angle)

rotateY

沿着 Y 轴的 3D 旋转 rotateY(angle)

rotateZ

沿着 Z 轴的 3D 旋转 rotateZ(angle)

skew

沿着 X 和 Y 轴的 2D 倾斜转换 skew(x-angle,y-angle)

skewX

沿着 X 轴的 2D 倾斜转换 skewX(angle)

skewY

沿着 Y 轴的 2D 倾斜转换 skewY(angle)

perspective

perspective(n) 3D 转换元素透视视图

perspective-origin

perspective-origin 用户观看 3D 定位元素的位置

transform-origin

转换元素的位置

语法:transform-origin: x-axis y-axis z-axis
transform-style

3D元素渲染(如何在 3D 空间中渲染嵌套的元素)

flat

子元素将不保留其 3D 位置

preserve-3d

子元素将保留其 3D 位置

transition-delay

延时开始

transition-duration

过渡完成所需要的时间

transition-property

过渡效果对应的 CSS 属性的名称

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

在cubic-bezier函数中自己的值。可能的值是 0 至 1 之间的数值。

perspective-origin

定义3D元素所基于的X轴和Y 轴

语法:perspective-origin:x-axis y-axis;
transition

元素过渡简写

语法:property/duration/timing-function/delay

其它

inset

定位元素位移的简写(IE不支持),属性用作定位元素的 top、right、bottom、left

column-rule

column-rule 所有 column-rule-* 属性的简写属性。

语法:column-rule: column-rule-width column-rule-style column-rule-color;
columns

列宽和列数的简写属性

语法:columns column-width 和 column-count 的简写属性。

column-width

规定列宽度

column-count

属性规定元素应该被划分的列数

initial

默认值

inherit

继承

position

规定用于元素的定位方法的类型(静态、相对、绝对或固定)

absolute

绝对定位(相对于 static 定位以外的第一个父元素进行定位

position

相对定位

fixed

相对于浏览器窗口进行定位。

static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

inherit

继承

z-index

z-index 设置定位元素的堆叠顺序

auto

默认。堆叠顺序与父元素相等

number

堆叠顺序

inherit

继承

all
对属性的操作

all

重置所有属性(除了 unicode-bidi 和 direction)。

initial

默认值

inherit

继承

unset

如果可继承,则将应用于元素或元素父元素的所有属性更改为其父值,否则将其更改为初始值。

caption-side

表格标题放置

top

默认值。把表格标题定位在表格之上。

bottom

把表格标题定位在表格之下。

inherit

规定应该从父元素继承 caption-side 属性的值。

@charset

@charset 规定样式表中使用的字符编码。

float

元素浮动方式(规定是否应该对盒(box)进行浮动)

left

元素向左浮动

right

元素向右浮动

both

在左右两侧均不允许浮动元素。

none

默认值。允许浮动元素出现在两侧。

inherit

规定应该从父元素继承 clear 属性的值。

column-count

列数

column-count

规定元素应分为的列数

number

元素内容将被划分的最佳列数

auto

由其他属性决定列数

column-fill

指定如何填充列

column-rule-style

column-rule样式

dotted

点线

dashed

虚线

solid

实线

double

双边

groove

3D 坡口

ridge

3D 脊线

inset

3D inset

outset

3D outset

hidden

隐藏

column-rule-width

规定列之间的规则宽度

content

伪元素添加的属性

详情:content 与 :before 和 :after 伪元素一起使用,来插入生成的内容。

@import

导入另一张样式表

@media

关于媒体的样式设置

详情:@media 为不同的媒体类型、设备、尺寸设置样式规则。
pointer-events

指针的反应(元素是否对指针事件做出反应)

auto

默认值。元素对指针事件做出反应,比如 :hover 和 click。

none

元素不对指针事件做出反应

initial

将此属性设置为其默认值

inherit

从其父元素继承此属性

resize

调整元素

none

用户无法调整元素的尺寸

both

用户可调整元素的高度和宽度

horizontal

用户可调整元素的宽度

vertical

用户可调整元素的高度

tab-size

规定制表符的宽度

number

每个制表符要显示的空格字符数。默认值是 8

length

制表符的长度。主流浏览器都不支持这个属性值

initial

将此属性设置为其默认值

inherit

继承

table-layout

用于对单元格、行和列进行布局的算法

automatic

默认。列宽度由单元格内容设定。

fixed

列宽由表格宽度和列宽度设定。

inherit

继承


常用函数

attr

返回所选元素的属性值

例子:content:'(' attr(href) ')'

calc

执行计算属性值

例子:width: calc(100% - 100px);

cubic-bezier

三次贝塞尔曲线

语法:cubic-bezier(x1,y1,x2,y2) x1,y1,x2,y2 必需。数值。x1 和 x2 必须是 0 到 1 之间的数字

hsl

使用色相-饱和度-亮度模型(HSL)颜色

hsla

使用色相-饱和度-亮度-阿尔法模型(HSLA)颜色。

linear-gradient

线性渐变,将线性渐变设置为背景图像。至少两种颜色(从上到下)

语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

例子:

1.linear-gradient(to right, red , blue);

2.linear-gradient(180deg, red, blue);

radial-gradient

径向渐变,将径向渐变设置为背景图像。至少两种颜色(从中心到边缘)。

语法:background-image: radial-gradient(shape size at position, start-color, ...,last-color)

例子:background-image: radial-gradient(red 5%, green 15%, blue 60%);

repeating-linear-gradient

重复线性渐变

background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1,color-stop2, ...);

例子:repeating-linear-gradient(45deg, red, blue 7%, green 10%);

repeating-radial-gradient

重复径向渐变

语法:background-image: repeating-radial-gradient(shape size at position, start-color, ...,last-color)

rgb

使用红-绿-蓝模型(RGB)颜色。

rgba

使用红-绿-蓝-阿尔法模型(RGB)颜色。

var

插入自属性的值

语法:var(custom-property-name, value)


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

vip飞梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值