CSS框線與清單樣式(DAY12)

2021 iThome 鐵人賽

DAY 12

Modern Web

網頁前端基礎&Vue.js系列第 12 篇

13th鐵人賽

Vince

2021-09-25 15:38:21

1888 瀏覽

分享至

這一篇文章會介紹如何在html元素中設定框線的顏色、寬度粗細和樣式，也會介紹需要用到什麼樣的css屬性來指定元素周圍4邊的個別樣式。而在清單的樣式中會介紹到無序、有序、圖片清單的相關屬性。

框線樣式

顏色
屬性:border-color:
寬度粗細
屬性:border-width:
(屬性值可以用medium、thin、thick或是尺寸單位px、em等)
樣式
屬性:border-style:
(常用屬性值:solid、dotted、dashed、double)
元素周圍4邊的個別樣式
屬性: border-top-color:或border-top-width:或border-top-style:
(top、right、bottom、left可指定元素的哪一邊)
圓弧邊框
屬性: border-radius:
樣式速寫法
屬性:border:或border-top:

<head>
    <style>
        h1 {
            border-top: solid thick aliceblue;
            /*元素上方框線樣式*/
            border-bottom: solid thick antiquewhite;
            /*元素下方框線樣式*/
        }
        video {
            border-radius:10px;
        }        /*圓弧邊框*/
    </style>
</head>
<body>
    <h1>台東熱氣球嘉年華</h1>
    <video src="IMG_4736.MOV" controls></video>
</body>

清單樣式

類型
屬性:list-style-type:
常用屬性值:
無序:sqare、disc、circle、none(不使用符號)
有序: decimal、trad-chinese-informal
位置
屬性:list-style-position:
屬性值:inside、outside(於li元素之內、外)
圖片
屬性:list-style-image:url(" ")
補充:使用圖片清單這個屬性其實很在定位和調整大小時很麻煩，圖片長寬過大時整個圖片清單的位置會跑掉，故不建議使用這個方法。可以使用table表格的方式來將圖片清單定位，像是:

清單樣式範例:

<head>
    <style>
        .one {
            list-style-type: circle;
            list-style-position:outside;
        }
        .two {
            list-style-type: decimal;
            list-style-position: inside
        }
        
    </style>
</head>
<body>
    <ul class="one">
        <li>computer</li>
        <li>mouse</li>
        <li>audio</li>
        <li>outside屬性</li>
    </ul><hr />
    <ul class="two">
        <li>computer</li>
        <li>mouse</li>
        <li>audio</li>
        <li>inside屬性</li>
    </ul><hr />
</body>