HTML+CSS Easy to Start Box Model Border (Part 1)

The border of the box model is the line surrounding the content and filler. You can set the thickness, style and color of this line (three attributes of the border).

The following code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>邊框</title>
  <style type="text/css">
      p{
        border:1px solid red;

        /*也可分開來寫*/
        /*  border-width: 1px;*/    /*粗細(xì)*/
        /* border-style: solid;*/   /*樣式，實線，虛線，等*/
        /* border-color: red;*/     /*顏色*/


       /* dashed（虛線）| dotted（點線）| solid（實線）  小伙伴們可以試一下*/
      }
  </style>
</head>
<body>
    <p> 我的世界因為有你才會美   我的天空因為有你不會黑    給我快樂為我傷心流眼淚 
          給我寬容能讓我展翅高飛 
          你的話你的淚 你的笑你的美 
          在我眼中勝過最美的玫瑰 
        抱著夢往前飛 不逃避不后退 
        你是我成功路上的堡壘！ 
        給我翅膀 讓我可以翱翔 
        給我力量 是你讓我變堅強(qiáng) 
        不怕受傷 因為有你在身旁 
        你的笑你的淚 是我逐夢路上最美的太陽 </p>
</body>
</html>

The color can be written in hexadecimal #ccc #f60 etc.

The width in border-width (border width) can also be set to:

thin | medium | thick (but not very commonly used), pixels (px) are most commonly used

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邊框</title> <style type="text/css"> p{ border:1px solid red; /*也可分開來寫*/ /* border-width: 1px;*/ /*粗細(xì)*/ /* border-style: solid;*/ /*樣式，實線，虛線，等*/ /* border-color: red;*/ /*顏色*/ /* dashed（虛線）| dotted（點線）| solid（實線）小伙伴們可以試一下*/ } </style> </head> <body> <p> 我的世界因為有你才會美我的天空因為有你不會黑給我快樂為我傷心流眼淚給我寬容能讓我展翅高飛你的話你的淚你的笑你的美在我眼中勝過最美的玫瑰抱著夢往前飛不逃避不后退你是我成功路上的堡壘！給我翅膀讓我可以翱翔給我力量是你讓我變堅強(qiáng) 不怕受傷因為有你在身旁你的笑你的淚是我逐夢路上最美的太陽 </p> </body> </html>

submit Reset Code

Automatic operation