css3样式汇总
2021-02-12 00:09:50 15 举报AI智能生成
CSS3样式一览图
作者其他创作
大纲/内容
动画
@keyframes
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
用户界面
outline-offset 对轮廓进行偏移
resize 用户可调整的元素
cursor
not-allowed 禁用属性，非css3
多列布局
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
column-width column-count的简写
间接属性
break-after
break-before
break-inside
弹性盒子
flex container
display: flex
display: inline-flex
flex-direction
设置主轴的方向
flex-wrap
设置一条轴线排不下时换行的方式
flex-flow
flex-direction flex-wrap的缩写
justify-content
设置项目在主轴上的对齐方式
align-items
设置项目在交叉轴上的对齐方式
align-content
设置多根轴线的对齐方式，如果只有一根轴线该属性不起作用
flex item
order
设置子项目的排序，越小越前
flex-grow
设置项目的放大比例来分配剩余空间，默认为0，即存在剩余空间也不放大
flex-shrink
设置项目的缩小比例来消化多出的空间，默认为1，即如果空间不足该项目将缩小
flex-basis
设置项目占据的主轴空间，默认auto
flex
flex-grow flex-shrink flex-basis的缩写，默认为0 1 auto
align-self
设置单个项目的交叉轴对齐方式
多媒体查询
@media not | only mediatype and (expressions) { }
mediatype
all
print
用于打印机
screen
用于电脑屏幕、平板、智能手机等
speech
用于屏幕阅读器
expressions
width
height
max-height
min-height
max-width
min-width
device-width
device-height
max-device-width
min-device-width
max-device-height
min-device-height
aspect-ratio
max-aspect-ratio
min-aspect-ratio
页面宽高比
device-aspect-ratio
max-device-aspect-ratio
min-device-aspect-ratio
设备宽高比
color
max-color
min-color
彩色元件数
color-index
max-color-index
min-color-index
彩色查询表条目数
monochrome
max-monochrome
min-monochrome
单色设备每像素单色元件数
resolution
max-resolution
min-resolution
设备分辨率
grid
输出设备是否使用栅格或点阵
orientation
是否横屏
scan
电视类设备的扫描工序
选择器
基本选择器
元素选择器
elementname 元素名称
类选择器
.classname 类名
ID选择器
#idname ID名
通配选择器
*，
ns|*
匹配ns命名空间下的所有元素
*|*
匹配所有命名空间下的所有元素
|*
匹配所有没有命名空间的元素
属性选择器
[attribute]
选择所有带有target属性元素
[attribute=value]
选择所有使用target="-blank"的元素
[attribute~=value]
选择属性包含单词"value"的所有元素
[attribute|=language]
选择 lang 属性以 en 为开头的所有元素
[attribute^=value]
选择属性的值以"value"开头的元素
css3
[attribute$=value]
选择属性的值以"value"结尾的元素
css3
[attribute*=value]
选择属性的值包含字符串"value"的元素，注意与~=区分
css3
组合选择器
后代选择器
A B
子选择器
A > B
相邻兄弟选择器
A + B
普通兄弟选择器
A ~ B
css3
伪类
css1/2
:link / :visited / :active / :hover / :focus
:first-letter / :first-line / :first-child
:before / :after
:lang(language)
选择一个lang属性的起始值="it"的所有元素
css3
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:nth-child(n)
:nth-last-child(n)
:root
:empty
:target
:enabled
:disabled
:checked
::selection
:not(selector)
:out-of-range
:in-range
:read-write
:read-only
:optional
:required
:valid
:invalid
更多探索
盒模型
box-sizing 盒模型内容位置
content-box
border-box
背景和边框
border-radius 圆角边框
border
border-style
border-width
border-bottom
border-left
border-right
border-top
border-bottom-color
border-left-color
border-right-color
border-top-color
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
border-bottom-style
border-left-style
border-right-style
border-top-style
border-bottom-width
border-left-width
border-right-width
border-top-width
border-collapse
border-color
border-spacing
box-align
box-direction
box-flex
box-flex-group
box-lines
box-ordinal-group
box-orient
box-shadow 盒模型阴影
border-image 图片边框
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
background-size 背景图片尺寸
contain / cover / 100px 100px / 50% 100%
background
background-blend-mode
背景层的混合模式
background-position
设置背景图像位置
background-repeat
background-origin 背景图片定位区域
content-box / padding-box / border-box
background-clip 规定背景的绘制区域
content-box / padding-box / border-box
background-break
continuous / bounding-box / each-box
background-image
支持多重背景，即支持多个图片背景
background-color
css3中对背景颜色的调整
background-repleat
css3中新增两个属性
space
图片以相同的间距平铺且填充整个标签元素
round
图片自动缩放直到适应且填充整个标签元素
background-attachment
css3中新增属性
local
当标签元素滚动时它才有效(如设置overflow:scroll;)，可以做到让背景随元素内容滚动而滚动了
fixed / scroll / local
渐变
linear-gradient(direction, color-stop1, color-stop2...)
线性渐变
linear-gradient(angle, color-stop1, color-stop2...)
repeating-linear-gradient()
重复线性渐变
radial-gradient(shape size at position, start-color,..., last-color)
shape
circle
ellipse
size
closest-side
farthest-side
closest-corner
farthest-corner
position
repeating-radial-gradient()
重复的径向渐变
文本效果
text-shadow 文本阴影
word-wrap 长文本换行
word-break
text-overflow 文本溢出
text-wrap
text-outline
text-justify
text-emphasis
text-align-last
punctuation-trim
hanging-punctuation
字体 @font-face
font-family
src
font-stretch
font-style
font-weight
unicode-range
2D/3D转换
transform 变换
translate(x,y)
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
scale(x,y)
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
rotate(angle)
rotate3d(x,y,z,angle)
rotateX(x)
rotateY(y)
rotateZ(z)
skew(x-angle,y-angle)
skewX(x)
skewY(y)
matrix()
perspective(n)
transform-origin
transform-style
perspective
perspective-origin
backface-visibility
过渡
transition
transition-property
transition-duration
transition-timing-function
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(n,n,n,n)
transition-delay
0 条评论
下一页
