search

Home >Web Front-end >CSS Tutorial >CSS outline style properties

CSS outline style properties

WBOY
WBOYforward
2023-09-19 09:25:021479browse

CSS 轮廓样式属性

outline-style property specifies the style of the line surrounding the element. It can take one of the following values ​​-

  • None - No borders. (Equivalent to outline width: 0;)
  • solid line - The outline is a solid line.
  • Pointed Line - A contour is a series of points.
  • Dotted Lines - The outline is a series of short lines.
  • Double - The outline is two solid lines.
  • Grooves - The outlines look as if they are carved into the page.
  • Ridge - Contoured look with grooves.
  • Insert - Outline makes the box appear to be embedded in the page.
  • Getting Started - Outline makes the box look like it is embedded in the page. The frame looks like it's coming out of the canvas.
  • Hide - Same as None.

Example

You can try running the following code to implement the outline-style attribute -

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid outline.
      </p>
      <br />
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

The above is the detailed content of CSS outline style properties. For more information, please follow other related articles on the PHP Chinese website!

css
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to play and pause CSS animation using CSS custom properties?Next article：How to play and pause CSS animation using CSS custom properties?

Related articles

See more