Home > Web Front-end > CSS Tutorial > How to set image outline with css

How to set image outline with css

王林
Release: 2020-11-30 17:04:56
Original
3042 people have browsed it

How to set the outline of an image in css: You can use the outline attribute to set it, such as [outline:green dotted thick;]. An outline is a line drawn around an element, located outside the edge of the border, to highlight the element.

How to set image outline with css

The operating environment of this tutorial: Windows 7 system, css3 version, this article is applicable to all brands of computers.

Related attributes:

Outline (outline) is a line drawn around the element, located outside the edge of the border, which can highlight the element.

(Learning video sharing: css video tutorial)

The outline shorthand attribute sets all outline attributes in one statement.

The attributes that can be set are (in order): outline-color, outline-style, outline-width

If you do not set one of the values, there will be no problem, such as outline:solid #ff0000; is also allowed.

Attribute value:

  • outline-color Specifies the color of the border. See: outline-color for possible values.

  • outline-style Specifies the style of the border. See: outline-style for possible values.

  • outline-width Specifies the width of the border. See: outline-width for possible values.

  • inherit Specifies that the setting of the outline attribute should be inherited from the parent element.

Code implementation:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
img{
	border:1px solid red;
	outline:green dotted thick;
}
</style>
</head>

<body>
<img  src="../demo/1.jpg"    style="max-width:90%"/ alt="How to set image outline with css" >
</body>
</html>
Copy after login

Effect:

How to set image outline with css

Related recommendations: CSS tutorial

The above is the detailed content of How to set image outline with css. 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