window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

00

CSS3 制作背景图

CSS background 背景 https://www.oxxostudio.tw/articles/202008/css-gradient.html

00
00
00
00
#html #CSS #CSS3 制作背景图 #Repeating Gradients 重複漸層 #repeating radial gradient 放射重複漸層 #repeating linear gradient 線性重複漸層 #CSS background 背景 #repeating conic gradient 圓錐形重複漸層
00
00

CSS語法應用:overflow控制捲軸

CSS overflow 控制捲軸

00
00

CSS animation 動畫屬性

CSS animation 動畫屬性

00
00
00
00

text-shadow 文本陰影效果

text-shadow 文本陰影效果

00
00
00
00
00
00
00
00
00
#html #script #CSS text-shadow #text-shadow 文本陰影效果 #CSS 文字陰影 #CSS 模糊文字陰影

CSS font 字形 字串 字樣 文字

CSS font text 字體文本




font CSS // 字體 CSS
font-size: 20px ;
color : black ;
font-weight : normal ;
font-style: normal ;
font-family: serif ;
text-transform: initial ;
text-decoration : inherit ;
line-height: normal;
word-spacing: normal;
letter-spacing:normal;


font style // 字體樣式
object.style.fontSize = "20px";
object.style.color = "black";
object.style.fontWeight = "normal";
object.style.fontStyle = "normal";
object.style.fontFamily = "serif";
object.style.textTransform = "initial";
object.style.textDecoration = "inherit";
object.style.lineHeight = "normal";
object.style.wordSpacing = "normal";
object.style.letterSpacing = "normal";
#html #script #CSS font 字形 字串 字樣 文字 #CSS font text 字體文本 #fontSize #color #fontStyle #fontFamily #textTransform #textDecoration #lineHeight #wordSpacing #font-size #font-weight #font-style #font-family #text-transform #text-decoration #word-spacing #capitalize #lowercase #overline #underline #line-through

display-table-table-cell :

display:block || display:none || display:inline || display:inline-block
display:list-item || display:inline-table || display:inherit
00
描述
none此元素不會被顯示。
block此元素將顯示為塊級元素,此元素前後會帶有換行符。
inline默認。此元素會被顯示為內聯元素,元素前後沒有換行符。
inline-block行內塊元素。(CSS2.1 新增的值)
list-item此元素會作為列表顯示。
inline-table此元素會作為內聯表格來顯示(類似 <table>),表格前後沒有換行符。
inherit規定應該從父元素繼承 display 屬性的值。
#html #script #display:none #display:block #display:inline #display:inline-block
#display:inline-table
#display:inherit
display:table-cell || display:table-row || display:table-cell
text-align:left/center/right || vertical-align:top/middle/bottom
00
描述
display:table 顯示 表格(類似 <table>)
display:table-row-group 行的分組 (類似 <tbody>)
display:table-header-group 表格頭組 (類似 <thead>)
display:table-footer-group 表格尾組(類似 <tfoot>)
display:table-row 表格換行(類似 <tr>)
display:table-column-group 列的分組 (類似 <colgroup>)
display:table-column 格列顯示(類似 <col>)
display:table-cell 表格單元格(類似 <td> 和 <th>)
display:table-caption 表格標題(類似 <caption>)
#html #script #display:table-cell #display:table-row #display:table #text-align:right
#text-align:center #text-align:left #vertical-align:top #vertical-align:middle #vertical-align:bottom
display:flex || flex-direction:row || flex-direction:row-reverse
flex-direction:column || flex-direction:column-reverse || flex-direction:initial
00
描述
flex-direction 改變主軸顯示方向,水平反轉、轉為垂直、垂直反轉等
flex-direction:row 主軸從左至右
flex-direction:row-reverse 主軸從右至左
flex-direction:column 主軸由上至下
flex-direction:column-reverse主軸由下至上
flex-direction: initial 最初的
#html #script #display:table-cell #display:table-row #display:table #text-align:right
#text-align:center #text-align:left #vertical-align:top #vertical-align:middle #vertical-align:bottom
display:flex || flex-direction:row || lex-direction:row-reverse
flex-direction:column || flex-direction:column-reverse || flex-direction:initial
00