---
tags: 前端
---
# CSS 屬性集合
> 引入CSS的標籤`<link rel="stylesheet" href="style.css">`

https://css-tricks.com/
## 代名詞列舉
屬性|參數
-|-
[border] | solid、dashed、dotted、ridge、none
[unit] | px、pt、vh、vw、cm、mm、em、rem、auto
[color] | #fff、#cccccc、rgba、hsl
[set] | outset、inset
[*] | left、right、top、bottom
[number] | 數字
[flex] | flex-start、flex-end、center、space-between、space-around、space-evenly
[grid] | start、end、center、stretch、space-around、space-between、space-evenly
[grid-unit] | 1~5、one~five
## 位置
屬性|參數
-|-
position | static、relative、absolute、fixed、sticky
left、right、top、bottom | [*]
min-width | [unit]
width | [unit]
max-width | [unit]
cursor | auto、pointer、grab、grabbing、progress、none
display | block、inline-block、grid、flex、none
overflow | visible、hidden、scroll
## 間距
屬性|參數
-|-
margin-[*] | [unit]
outline | [border] [unit] [color] [set]
border | [border] [unit] [color] [set]
border-radius | leftTop rightTop rightBottom leftBottom
padding-[*] | [unit]
## 內容
屬性|參數
-|-
box-shadow | [x-offset] [y-offset] [blur] [z-offset] [color]
background | repeat-linear-radient(deg , 5px white)
background-color | [color]
background-origin | border-box、padding-box、content-box
background-size | auto、cover、content
background-repeat | repeat、round、space、no-repeat
background-attachment | scroll、fixed、local
background-position | top、left、center、50%
filter | none、blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()、url()
background | linear-gradient(0deg,white 0%,black 100%)、radial-gradient()
float | left、right
# Flexbox
屬性|參數
-|-
flex | [number]
flex-wrap | nowrap、wrap、wrap-reverse
flex-direction | row、row-reverse、column、column-reverse
flex-grow | [number]
align-items | flex-start、flex-end、center、stretch、baseline
align-content | [flex]
justify-content | [flex]
## Grid Layout
屬性|參數
-|-
grid-template-columns | 100px 50px auto 50px 100px
grid-template-rows | 1fr 1fr 1fr
grid-gap | [row-gap] [col-gap]
justtify-items | start、end、center、stretch
justify-content | [grid]
align-items | start、end、center、stretch
align-content | [grid]
grid-row-start | [grid-unit]
grid-row-end | [grid-unit]
grid-row | [grid-row-start] [grid-row-end]
grid-column-start | [grid-unit]
grid-column-end | [grid-unit]
grid-column | [grid-unit]
grid-area | [grid-row-start] [grid-column-start] [grid-row-end][grid-column-end]
align-self | start、end、center、stretch
justify-self | start、end、center、stretch
place-self | center、center stretch
## Font
屬性|參數
-|-
font-family | Arial, Monaco, '微軟正黑體'
font-weight | normal、bold、bolder、lighter、100、900
font-size | [unit]
color | [color]
line-height | [unit]
text-align | left、right、center、justify、start、end
vertical-align | top、middle、bottom
text-justify | inter-word、inter-character、auto、none
text-decoration | underline、overline、line-through、none
list-style | circle、square、decimal、none
white-space | normal、nowrap、pre、pre-wrap、pre-line、inherit、initial、unset
word-wrap | break-word
text-overflow | ellipse
writing-mode | horizontal-tb、vertical-rl、vertical-lr
## Animation
屬性|參數
-|-
animation | [keyframe] [duration] [timing-function] [delay] [iteration-count]
transition | [property] [duration] [timing-function] [delay]
transition-timing-function | ease、linear、ease-in、ease-out、step-start、step-end、cubic-bezier()
transform-origin | top left right bottom center
transform | scaleXY、skewXY、rotateXYZ(45deg)、translateXY、matrix(scaleX,scaleY,skewX,skewY,translateX,translateY)、translate3d()、matrix3d(0,0,0,0,0,0,0,0,0)
opacity | 0~1
z-index | 0~999
## Svg
屬性|參數
-|-
offset-path |
offset-anchor |
offset-distance |
stroke-dashoffset |
stroke-dasharray |
fill |
stroke |
stroke-width |
opacity |
## pseudo class
參數|說明
-|-
:hover|滑鼠移入
:active|滑鼠點擊
:focus|輸入框或按鈕被聚焦
:before|偽元素
:after|偽元素
:nth-child()|第n個子元素
::selection|選擇框
::-webkit-scrollbar|卷軸容器
::-webkit-scrollbar-thumb|卷軸拉霸
::-webkit-scrollbar-track|卷軸軌道
## prefix
屬性|說明
-|-
-webkit- | Chrome, Safari
-ms- | 微軟
-moz- | 火狐
## misc
屬性|說明
-|-
@keyframes |
@media only screen and (max-width: 600px) | 響應式
--vars | CSS變數