Home > Web Front-end > Front-end Q&A > How to set html5 borders

How to set html5 borders

藏色散人
Release: 2021-04-12 10:27:15
Original
2641 people have browsed it
How to set the html5 border: First create an HTML sample file; then create a div with a code such as "
"; finally set the border style through the border attribute.

How to set html5 borders

The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

HTML5 border settings (border)

Border style:

solid solid line dotted dotted line dashed dotted line double double line inset three-dimensional effect

The border has 3 elements, the usage is border-top:10px soild red;

border-top:上边
border-bottom:下边
border-left:左边
border-right:右边
Copy after login

Example:

CSS draws a triangle,

CSS2 Introduced border color value transparent. This value is used to create an invisible border with width. Please look at the following example:

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>透明边框</title>
  <style>
  body{
  background:#333300;
  
  }
     #a{
     width:0px;
height:0px;
border-top:30px solid red;
border-bottom:30px solid transparent;
border-left:30px solid transparent;
border-right:30px solid transparent;
 
}
  </style>
 </head>
 <body>
  <div id=a></div>
 </body>
</html>
Copy after login

The advantage of setting a transparent border is that if the background of the page is not white, after setting the transparent border, the border will not be visible. The normal method is to set the border color to white. If the background is not If it is white but another color, you can see a white area exposed.

[Recommended learning: HTML video tutorial]

The above is the detailed content of How to set html5 borders. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template