捉蟲放大鏡

<style>
    h2 {
        /* 文字對齊屬性 text-align */
        /* center:居中,left,right:居左居右,justify:文字拉伸鋪滿一行 */
        text-align: center;
        /* 文字大小寫屬性 text-transform: uppercase:大寫，lowercase:小寫，capitalize：首字母大寫 */
        text-transform: capitalize;
        font-size: 60px;
        /* 文字厚度 font-weight */
        font-weight: 400;
        /* 文字的行高 line-height */
        line-height: 100px;
        /* 透明度 */
        opacity: 0.5;
    }
</style>

<h2>Test title</h2>
<!-- 驗證文本其他tag屬性 em:斜體， u: 下劃線， strong:加粗強調，s:刪除 -->
<p><s>刪除</s> <u>下劃線</u> <strong>強調</strong></p>
<p><em>字體傾斜</p>
<!-- hr表示下劃線 -->
<hr>

<style>
    /* 使用單詞表示顏色 */
    .word-color {
        color: red;
    }
    
    /* 使用hex16進制表示顏色 */
    .hex-color {
        color: #FFFFFF;
    }
    
    /* 使用rgb表示顏色 */
    .rgb-color {
        color: rgb(0,0,0);
    }
    
    /* 使用rgba表示顏色+透明度 */
    .rgba-background-color {
        background-color: rgb(255,0,0,0.5)
    }
    
    /* 漸變色 linear-gradient,顏色數量自定義 */
    .yellow-white-blue {
        background: linear-gradient(30deg, yellow, rgb(255,255,255), #0000ff);
    }
    
    /* 重復漸變 repeating-linear-gradient*/
    .repeat-color{
        border-radius: 20px;
        width: 70%;
        height: 400px;
        margin:  50 auto;
        background: repeating-linear-gradient(
            90deg,
            yellow 0px,
            blue 40px,
            green 40px,
            red 80px
        );
    }
    
    div {
        width: 200px;
        height: 200px;
    }

</style>

<div class="rgba-background-color">
    <p class="rgb-color">顏色測試</p>
</div>
<div class="yellow-white-blue"></div>
<div class="repeat-color"></div>