使用 CSS 设置边框样式

javascriptweb developmentfront end scripts

要设置边框样式,请使用 border-style 属性。 border-style 属性允许您选择以下边框样式之一:

  • none:无边框
  • solid:边框是一条实线。
  • dotted:边框是一系列点。
  • dashed:边框是一系列短线。
  • double:边框是两条实线。
  • groove:边框看起来好像是刻在页面上的。
  • ridge:边框看起来与 groove 相反。
  • inset:边框使框看起来像是嵌入在页面。
  • outset:边框使框看起来像是从画布中伸出的。
  • hidden:与 none 相同,但表格元素的边框冲突解决方面除外。

示例

您可以尝试运行以下代码来设置边框的样式:

<html>
   <head>
   </head>
   <body>.
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
   </body>
</html>

相关文章