css3 私有前綴
- -webkit- chrome/safari等webkit內核瀏覽器
- -moz- firfox
- -o- opera
- -ms- IE
css3 盒子模型
-
box-sizing 值content-box/border-box
content-box(默認) border-box(不會增加padding的值) -
resize(用於用戶縮放，調節元素尺寸大小)值none/horizontal(水平)/vertical(垂直)/both(可放大,不能縮小到比它自身都小)
-
outline(給元素周圍繪制一條輪廓線)
outline:width style color -
outline-width
-
： 用長度值來定義輪廓的厚度。不允許負值 -
medium： 定義默認寬度的輪廓。
-
thin： 定義比默認寬度細的輪廓。
-
thick： 定義比默認寬度粗的輪廓。
-
outline-color
-
outline-style 值同border-style solid(實線輪廓)/dotted(點狀輪廓)/dashed(虛線輪廓)/double(雙線輪廓)...
-
otline-offset(外廓線的偏移量)
-
display
none:隱藏對象 list-item:指定對象為列表項目 inline-block:指定對象為內聯塊級元素 inline-table:內聯元素級的表格 table-caption；指定對象為表格標題 table-cell:表格單元格 table-row:表格行
css3長度單位
絕對單位
- em:相對長度單位。相對於當前對象內文本的字體尺寸。
- mm:毫米
- pt:點
- p
- pc：派卡
- q:1/4毫米（quarter-millimeters）。絕對長度單位。
相對單位
- ch:數字“0”的寬度
- px
- vm:相對於視口的寬度。視口被均分為100單位的vw
- ex:相對於字符“x”的高度。通常為字體高度的一半。
- rem:相對於根元素(即html元素)font-size計算值的倍數
- vm:相對於視口的寬度。視口被均分為100單位的vw
- vh:相對於視口的高度。視口被均分為100單位的vh
- vmax:相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax
- vmin:相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin
css3 顏色
設置半透明
- opacity 0~1之間的小數，不透明度，值越大，越不透明
- IE兼容 filter:alpha(opacity=透明值)
顏色值
- hex 16進制
- colorname
- rgb
- rgba
- hsl(hue色調saturation飽和度lightness亮度)
- hsla
- transparent
css3 漸變
線性漸變
-
linear-gradient(方向， 色標1 色標位置，色標2 色標2位置）
-
linear-gradient(to right,red 10px,purple 100px -
方向：to left/to top/to right/to bottom/angle(0~360deg)
to top= 0 / 360 deg to right = 90 deg to bottom = 180 deg to left = 270 deg
徑向漸變
- radial-gradient(形狀 半徑 at 圓心，色標 色標位置，色標2 色標2位置）形狀半徑at圓心可省略
- 形狀：ellipse(橢圓）/circle
- 半徑：length,百分比，closest-corner(最近角度）/closeset-side（邊）/farthest-side（最遠的邊）/farthest-corner
- 位置 left/center/right/top/center/bottom,像素
