Home > Article > Web Front-end > How to create a framed effect when clicking on an image in CSS
How to create a framed effect when clicking on an image in CSS
- WBOYOriginal
- 2021-11-29 17:42:182150browse
In CSS, you can use the ":active" selector and border attribute to achieve the effect of a frame when the picture is clicked. The syntax is "picture element: active{border: border size solid border color;}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to create a framed effect on click of a picture in CSS
In css, you can use: active selector and border attribute to achieve clicked frame effect. The effect of the box, the :active selector is used to select active links. When you click on a link, it becomes active (activated). The border property is used to set the border style of an element.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style type="text/css">
div{
width:388px;
height:249px;
}
div:active{
border:1px solid red;
}
</style>
<div><img src="1118.02.png"/ alt="How to create a framed effect when clicking on an image in CSS" ></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to create a framed effect when clicking on an image in CSS. For more information, please follow other related articles on the PHP Chinese website!