search

Home >Web Front-end >HTML Tutorial >One trick to teach you how to use HTML to add border effects to images (detailed code explanation)

One trick to teach you how to use HTML to add border effects to images (detailed code explanation)

奋力向前
奋力向前Original
2021-08-19 18:39:2821160browse

In the previous article "Teach you step by step how to use css to create a rounded button effect (detailed code explanation)", I introduced you how to use css to create a rounded button effect. The following article will introduce to you how to use html to add border effects to pictures. Let’s take a look at how to do it

One trick to teach you how to use HTML to add border effects to images (detailed code explanation)

Methods to add border effects to pictures

1. Open the HTML code software and create a code. There are two ways to add picture effects

One method: add strokes to the picture or add a stroke to the outside box.

Second method: directly add the img image tag.

Choose one of the two options, I use the second method.

Code example

<style>
<div>{
 margin-top:50px;
 margin-left: 100px: 
}
</style>
</head>
<body>
<div>
<img  src="787.jpg" alt="One trick to teach you how to use HTML to add border effects to images (detailed code explanation)" >
</div>

Code effect

One trick to teach you how to use HTML to add border effects to images (detailed code explanation)

The code effect came out and found No more borders.

2. Add border settings to the picture, style: border-style, the styles include solid, dashed, etc. The color is set by border-color, and the thickness is set by border-width.

Note: The border style, border-style, is important, otherwise all other attributes will be invalid. 

div img{
border-style: dashed;
border-width: 5px;
border-color: blue;

One trick to teach you how to use HTML to add border effects to images (detailed code explanation)

After the code effect comes out, it is a border color, and now the border is composed of a dotted line

3. Combine these three attributes into An attribute, like border:dashed 5px blue; the effect is still the same, which is very convenient. 

div img{
border:dashed 5px blue;
}

One trick to teach you how to use HTML to add border effects to images (detailed code explanation)

The code effect is still the same, because the three attributes are combined into one attribute. Then, we only choose to add effects to one side of the picture.

4. Left: border-left, right: border-right, top: border-top, bottom: border-left. According to this setting, any side can be set independently. 

div img{
border:dashed 5px blue;
border-right:solid 10px blue; 
border-top: solid 10px blue;
    border-bottom: solid 10px blue;
    border-left:  solid 10px blue;
}

One trick to teach you how to use HTML to add border effects to images (detailed code explanation)

5. The code effect is out. It is almost in this state. Can the border width be enlarged? Control the border color through the border attribute of the div, set the width of the border to 20px, and the color to blue 

div img{
	border:dashed 5px blue;
	border-right:solid 20px blue; 
	border-top: solid 20px blue;
    border-bottom: solid 20px blue;
    border-left:  solid 20px blue

One trick to teach you how to use HTML to add border effects to images (detailed code explanation)

The final effect.

Notes: The composition of the border abbreviation attribute

  • border-width: specifies the width of the border;

  • ##border-style: Specify the style of the border;

  • border-color: Specify the color of the border.

Recommended learning:

Html video tutorial

The above is the detailed content of One trick to teach you how to use HTML to add border effects to images (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!

Statement：
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
Previous article：Teach you step by step how to use css to create a rounded button effect (detailed code explanation)Next article：Teach you step by step how to use css to create a rounded button effect (detailed code explanation)

Related articles

See more