Home > Article > Web Front-end > How to add shadow border with css (code example)
How to add shadow border with css (code example)
- 云罗郡主Original
- 2018-11-29 15:21:536399browse
How to set border shadow in css? Many people encounter this kind of problem and don't know how to deal with it. In fact, it is simple to use CSS to add a border. Let's take a look at how to use CSS to add a shadow border.
1: css shadow border usage syntax:
1. Attribute: box- shadow
2. How to use:
div{box-shadow:0 0 1px #000 inset;}3. How to use shadow:
The first zero means that the distance from the left side of the object is 0, and the shadow starts to display. Two zeros indicate that when the distance object is 0, the shadow will start to be displayed, 1px indicates that the range of the shadow is 1px, #000 represents the color of the shadow, inset indicates the shadow within the object, and no shadow is set outside the object.
4. Compatibility issues
Both Firefox browser version 3.5 and Google can support the box-shadow attribute.
2: How to add a shadow border with css?
After understanding what the shadow attribute is, let's talk about how to add a shadow border in CSS. The following code means adding a shadow border to the border.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS测试</title>
<style>
.box {box-shadow:5px 2px 6px #000 inset; width:300px; height:80px; margin:0 auto}
.box2 img {box-shadow:5px 2px 6px #000}
</style>
<body>
<div>盒子对象阴影测试</div>
<div class="box">DIV盒子内阴影</div>
<div>图片对象阴影测试</div>
<div class="box2"><img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="How to add shadow border with css (code example)" ></div>
</body>
</html>In the above code, we added the box-shadow attribute to the box to achieve the shadow effect of the box.
The above is the complete introduction to how to add shadow borders in css. If you want to know more about CSS3 tutorial, please pay attention to the php Chinese website.
The above is the detailed content of How to add shadow border with css (code example). For more information, please follow other related articles on the PHP Chinese website!