HTML+CSS 시작하기 쉬운 상자 모델 테두리(1부)

박스 모델의 테두리는 콘텐츠와 패딩을 둘러싸는 선입니다. 이 선의 두께, 스타일, 색상을 설정할 수 있습니다(테두리의 세 가지 속성).

다음 코드:

<!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>

색상은 16진수 #ccc #f60 등으로 쓸 수 있습니다.

border-width(테두리 너비)의 너비도 설정할 수 있습니다. to:

얇음 | 중간 | 두꺼움(매우 일반적으로 사용되지 않음), 가장 일반적인 것은 픽셀(px)

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전