Home > Article > Web Front-end > How to set a border effect for an image through the CSS border attribute

How to set a border effect for an image through the CSS border attribute

不言Original: 2018-07-16 16:34:235615browse

How to set a border for an image through css. In HTML, a border is added to an image through the border attribute value of the a1f02c36ba31691bcfe87b2722de723b tag. In css, various borders are set for images through the border attribute. Style, border-style defines the style of the border, such as dashed line, solid line or dotted line, etc.

HTML sets the border of the picture

In HTML, the border attribute value of the a1f02c36ba31691bcfe87b2722de723b tag is used to add a border to the picture, thereby controlling the thickness of the border. When this value When 0, it means there is no border.

<span style="font-size:24px;">
<img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg"  border="0">
<img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg"  border="1">
<img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg"  border="2">
</span>

The code is as above. You can see that all the borders are black, and the style is very single, all solid lines. Only the thickness of the border can be adjusted.

CSS setting the border of the image

You can easily obtain the values of various border styles through syntax prompts in Dreamweaver.

You can define the color of the border through border-color, and define the thickness of the border through border-width.

<html>
<span style="font-size:24px;">
	<head>
		<title>
			边框
		</title>
		<style>
			<!--
			img.test1{
			border-style:dotted;
			border-color:#FF9900;
			border-width:5px;
		}
			img.test2{
			border-style:dashed;
			border-color:blue;
			border-width:2px;
		}
			-->
		</style>
	</head>

	<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test1">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test2">
	</body>
</span>
</html>

The code is as above. The effect of the first picture is a golden, 5-pixel-wide dotted line, and the second picture is a blue, 2-pixel-wide dotted line.

In CSS, you can set four different styles of borders respectively, namely border-left, border-right, border-top, and border-bottom styles.

<html>
<span style="font-size:24px;">
	<head>
		<title>
			分别设置4个边框
		</title>
		<style>
			<!--
			img{
			border-left-style:dotted;
			border-left-color:#FF9900;
			border-left-width:5px;
			border-right-style:dashed;
			border-right-clolr:#33CC33;
			border-right-width:2px;
			border-top-style:solid;
			border-top-color:#CC00FF;
			border-top-width:10xp;
			border-bottom-style:groove;
			border-bottom-color:#666666;
			border-bottom-width:15px;
		}
			-->
		</style>
	</head>

	<body>
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"">
	</body>
</span>
</html>

The code is as above, and different styles are set for the four borders of the image. This method is also often used in many other HTML elements.

Border attribute, you can also write each value into the same statement, separated by spaces, which can greatly reduce the length of the code.

<html>
<span style="font-size:24px;">
	<head>
		<title>
			合并各CSS值
		</title>
		<style>
			<!--
			img.test1{
			border:5px double #FF00FF;
		}
			img.test2{
			border-right:5px double #FF00FF;
			border-left:8px solid #0033FF;
		}
			-->
		</style>
	</head>

	<body>
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test1">
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test2">
	</body>
</span>
</html>

In this way, the download speed of the web page can be accelerated and it will be clearer and easier to read.

In addition, in addition to the border attribute that can write the values of various attributes together, many other attributes of CSS can also perform similar operations. For example, attributes such as font, margin, and padding can all be unified. .

<span style="font-size:24px;">
p{
	font:italic bold 30px Arial,Helvetica,sans-serif;
	padding:0px 5px 0px 3px;
}
</span>

Related recommendations:

Two ways to implement css dotted line style: dotted and dashed (example)

The above is the detailed content of How to set a border effect for an image through the CSS border attribute. 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：Two ways to implement css dotted line style: dotted and dashed (example)Next article：Two ways to implement css dotted line style: dotted and dashed (example)

See more

How to set a border effect for an image through the CSS border attribute

Related articles