Home  >  Article  >  Web Front-end  >  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:403195browse

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.

How to add two borders to an image in css

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!

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