Home >Web Front-end >CSS Tutorial >How to add two borders to an image in css
How to add two borders to an image in css
- 醉折花枝作酒筹Original
- 2021-07-23 14:11:403238browse
In CSS, you can use padding to add a second border. You only need to add "border: border size solid color; padding: pixel size;" to the picture element. You can think of the img tag as a container that can hold images, and you can set padding for it.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Adding double borders to images also has many applications in actual use, which may not be frequent. Here is a brief introduction on how to achieve this effect, so as to become proficient in the application of some CSS properties. Let’s look at a code example first:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>document</title>
<style type="text/css">
img{
border:5px solid #696;
padding:5px;
background-color:#CCC;
}
</style>
</head>
<body>
<img src="mytest/demo/dborder.jpg"/>
</body>
</html>The above code achieves this effect by setting the border and padding of the a1f02c36ba31691bcfe87b2722de723b tag. In particular, many beginners often think that a1f02c36ba31691bcfe87b2722de723b is a content similar to text. In fact, it is not. It can be regarded as a container that can hold pictures (possibly although it is not accurate enough), and the inner border can be set for it. distance.
Recommended learning: css video tutorial
The above is the detailed content of How to add two borders to an image in css. For more information, please follow other related articles on the PHP Chinese website!