盒模型--邊框（一）

時間 2019-11-11

標籤模型邊框简体版

原文原文鏈接

盒模型--邊框（一）

盒子模型的邊框就是圍繞着內容及補白的線，這條線你能夠設置它的粗細、樣式和顏色(邊框三個屬性)。css

以下面代碼爲 div 來設置邊框粗細爲 2px、樣式爲實心的、顏色爲紅色的邊框：html

div{
    border:2px  solid  red;
}

上面是 border 代碼的縮寫形式，能夠分開寫：ui

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注意：spa

一、border-style（邊框樣式）常見樣式有：code

dashed（虛線）| dotted（點線）| solid（實線）。htm

二、border-color（邊框顏色）中的顏色可設置爲十六進制顏色，如:blog

border-color:#888;//前面的井號不要忘掉。

三、border-width（邊框寬度）中的寬度也能夠設置爲：utf-8

thin | medium | thick（但不是很經常使用），最常仍是用像素（px）。it

實例：class

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>邊框</title>
<style type="text/css">
p{border:2px dotted #ccc;}
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p>三年級時，我仍是一個膽小如鼠的小女孩，上課歷來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
    <p>到了三年級下學期時，咱們班上了一節公開課，老師提出了一個很簡單的問題，班裏不少同窗都舉手了，甚至成績比我差不少的，也舉手了，還說着："我來，我來。"我環顧了四周，就我沒有舉手。</p>   
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。