CSS框线与清单样式(DAY12)

这一篇文章会介绍如何在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>