HTML+CSS Easy t...LOGIN

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;*/    /*粗细*/
        /* border-style: solid;*/   /*样式,实线,虚线,等*/
        /* border-color: red;*/     /*颜色*/


       /* dashed(虚线)| dotted(点线)| solid(实线)  小伙伴们可以试一下*/
      }
  </style>
</head>
<body>
    <p> 我的世界因为有你才会美   我的天空因为有你不会黑    给我快乐为我伤心流眼泪 
          给我宽容能让我展翅高飞 
          你的话你的泪 你的笑你的美 
          在我眼中胜过最美的玫瑰 
        抱着梦往前飞 不逃避不后退 
        你是我成功路上的堡垒! 
        给我翅膀 让我可以翱翔 
        给我力量 是你让我变坚强 
        不怕受伤 因为有你在身旁 
        你的笑你的泪 是我逐梦路上最美的太阳 </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


Next Section
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框</title> <style type="text/css"> p{ border:1px solid red; /*也可分开来写*/ /* border-width: 1px;*/ /*粗细*/ /* border-style: solid;*/ /*样式,实线,虚线,等*/ /* border-color: red;*/ /*颜色*/ /* dashed(虚线)| dotted(点线)| solid(实线) 小伙伴们可以试一下*/ } </style> </head> <body> <p> 我的世界因为有你才会美 我的天空因为有你不会黑 给我快乐为我伤心流眼泪 给我宽容能让我展翅高飞 你的话你的泪 你的笑你的美 在我眼中胜过最美的玫瑰 抱着梦往前飞 不逃避不后退 你是我成功路上的堡垒! 给我翅膀 让我可以翱翔 给我力量 是你让我变坚强 不怕受伤 因为有你在身旁 你的笑你的泪 是我逐梦路上最美的太阳 </p> </body> </html>
submitReset Code
ChapterCourseware