Home > Article > Web Front-end > How to set image outline with css
How to set image outline with css
- 王林Original
- 2020-11-19 11:42:062945browse
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.
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>Effect:
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!