首頁 >web前端 >html教學 >html怎麼設定邊框

html怎麼設定邊框

藏色散人原創: 2021-04-01 11:11:2381191瀏覽

html設定邊框的方法：1、透過「border-width」屬性設定邊框寬度；2、透過「border-style」屬性設定邊框樣式；3、透過「border-color」屬性邊框顏色。

html怎麼設定邊框

本文操作環境：Windows7系統、HTML5&&CSS3版，DELL G3電腦

HTML 為元素設定邊框

屬性：border，可以為元素這是上右下左四條邊框（順序很重要）

#取值有三個：

1.border-width:邊框寬度，預設3px，可以手動設置，取像素值

2.border-style:邊框樣式，必填項。可取： solid （實線邊框） dashed(虛線邊框） dotted(點線邊框） double(雙線邊框）

3.border-color:邊框顏色，取顏色值，預設為黑色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        h1{
            width:300px;
            height:150px;
        }
        .c1{
            /*边框宽度与颜色有默认值，样式必须设置*/
 border:solid;
        }
        .c2{
            border:5px solid red;
        }
        .c3{
            border:5px dashed green;
        }
        .c4{
            border:5px dotted blue;
        }
        .c5{
            border:5px double orange;
        }
    </style>
</head>
<body>
<h1 class="c1"></h1>
<h1 class="c2"></h1>
<h1 class="c3"></h1>
<h1 class="c4"></h1>
<h1 class="c5"></h1>
</body>
</html>

效果如下：

html怎麼設定邊框

推薦學習：《HTML影片教學》《css影片教學》

以上是html怎麼設定邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 html double border

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html怎麼設定圖片下一篇：html怎麼設定圖片

看更多