文本样式
| 属性 |
属性值 |
说明 |
| text-shadow |
|
文本阴影 |
| text-stroke |
|
文本描边 |
| text-overflow |
|
文本溢出 |
| word-wrap |
|
强制换行 |
| word-break |
|
|
| @font-face |
|
嵌入字体 |
颜色样式
| 属性 |
属性值 |
说明 |
| opacity |
|
透明度 |
| rgba(R, G, B,A) |
RGBA颜色 |
|
| oackground:linear-gradient(方向, 开始颜色, 结束颜色) |
线性渐变 |
|
| ackground:radial-gradient(位置，开始色，结束色) |
径向渐变 |
|
边框样式
| 属性 |
属性值 |
说明 |
| border-radius |
px/em /百分比 |
圆角效果 |
| box-shadow |
数值 |
边框阴影 |
| border-colors |
色值 |
多色边框 |
| border-image |
url（图片路径） |
边框背景 |
背景样式
| 属性 |
属性值 |
说明 |
| background-size |
数值 |
背景大小 |
| background-origin |
|
背景位置 |
| background-clip |
|
背景剪切 |
CSS3变形
| 属性 |
属性值 |
说明 |
| transform: translate() |
数值 |
平移 |
| transform: scale() |
数值 |
缩放 |
| transform: skew() |
数值 |
倾斜 |
| transform: rotate0 |
度数 |
旋转 |
| transform-origin |
数值 |
改变中心原点 |
CSS3过度
| 属性 |
属性值 |
说明 |
| transition-property |
属性名称 |
对元素的哪一个属性进行操作 |
| transition-duration |
s |
过渡的持续时间 |
| transition-timing-function |
速率曲线值 |
过渡的速率变化方式 |
| transition-delay |
s |
过渡的延迟时间(可选参数) |
| transition |
过渡属性 过渡时间 过渡方式 延迟时间 |
复合属性 |
CSS3动画
| 属性 |
属性值 |
说明 |
| animation-name |
属性名称 |
对哪一个CSS属性进行操作 |
| animation-duration |
s |
动画的持续时间 |
| animation-timing-function |
速率曲线值 |
动画的速率变化方式 |
| animation-delay |
s |
动画的延迟时间 |
| animation-iteration-count |
数值 |
动画的播放次数 |
| animation-direction |
|
动画的播放方向，正向还是反向 |
| animation-play-state |
|
播放状态 |
| animation |
复合属性 |
|
多列布局
| 属性 |
属性值 |
说明 |
| column-count |
数值 |
列数 |
| column-width |
数值 |
每一列的宽度 |
| column-gap |
数值 |
两列之间的距离 |
| column-rule |
宽度值 样式值 颜色值 |
分隔线样式 |
| column-span |
|
定义跨列样式 |
弹性盒模型
| 属性 |
属性值 |
说明 |
| flex-grow |
数值 |
定义子元素的放大比例 |
| flex-shrink |
数值 |
定义子元素的缩小比例 |
| flex-basis |
数值 |
定义子元素的宽度 |
| flex |
数值 |
flex-grow、flex-shrink、flex-basis 的复合属性 |
| flex-direction |
row（横向排列） row-reverse（横向反向排列） column（纵向排列） column-reverse（纵向反向排列） |
定义子元素的排列方向 |
| flex-wrap |
nowrap（单行显示） wrap（多行显示） wrap-reverse（反向多行显示） |
定义子元素是单行显示，还是多行显示 |
| flex-flow |
flex-direction、flex-wrap的复合属性 |
|
| order |
数值 |
定义子元素的排列顺序 |
| justify-content |
flex-start（左边） center（中间） flex-end（右边） space-between（平均分布） space-around（平均分布） |
定义子元素在“横轴”上的对齐方式 |
| align-items |
flex-start（上边） center（中间） flex-end（下边） baseline（基线） stretch（适应父元素高度） |
定义子元素在“纵轴”上的对齐方式 |
其他样式
| 属性 |
属性值 |
说明 |
| outline |
宽度 样式 颜色 |
定义文本框的轮廓线样式 |
| initial |
CSS属性名称 |
重置CSS属性的取值 |
| calc()函数 |
表达式 |
计算CSS属性的取值 |
| overflow-X |
visible（默认） hidden（剪切内容，示y轴滚动条而） scroll（显示所有滚动条） auto（显示所有滚动条） |
定义内容超出元素“宽度”时应该如何处理 |
| overflow-y |
visible（默认） hidden（剪切内容，示x轴滚动条而） scroll（显示所有滚动条） auto（显示所有滚动条） |
定义内容超出元素“高度”时应该如何处理 |
| pointer-events |
auto（否） none（是）文章来源：https://www.toymoban.com/news/detail-771930.html |
是否禁用鼠标单击事件文章来源地址https://www.toymoban.com/news/detail-771930.html |
到了这里，关于CSS新手入门笔记整理：CSS3属性表的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
