7.边框.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. p {
  9. text-indent: 2em;
  10. }
  11. #box {
  12. width: 0;
  13. height: 0;
  14. border: 30px solid;
  15. border-color: white;
  16. border-bottom-color: red;
  17. /* width: 300px;
  18. height: 300px; */
  19. /* border-width: 20px;
  20. border-style: double;
  21. border-color: red; */
  22. /* border: 1px solid red; */
  23. /* border-top: 1px solid red; */
  24. }
  25. /*
  26. border: 复合属性 边框
  27. 粗细
  28. border-width
  29. 样式
  30. border-style
  31. solid 实线;dotted 点线; dashed 虚线;double 双边框
  32. 颜色
  33. border-color
  34. 上边框 border-top
  35. 下边框 border-bottom
  36. 左边框 border-left
  37. 右边框 border-right
  38. */
  39. </style>
  40. </head>
  41. <body>
  42. <div id="box"></div>
  43. <p>哈哈红红火火恍恍惚惚哈哈红红火火恍恍惚惚哈哈红红火火恍恍惚惚哈哈红红火火恍恍惚惚</p>
  44. </body>
  45. </html>