How to set a border effect for an image through the CSS border attribute-CSS Tutorial-php.cn

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

不言

Release： 2018-07-16 16:34:23

Original

5650 people have browsed it

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 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 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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!