Method: 1. Use the border attribute to add a border to the title element, with the syntax "border:width style color;"; 2. Use "text-align: center" to center the title text; 3. Use box-shadow Property adds a shadow effect to the title element's border.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
cssHow to set the title shadow border?
Let’s talk aboutcssHow to add a shadow border to the title.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:200px;
height:200px;
border:2px solid red;
text-align: center;
margin: 20px auto;
line-height: 200px;
box-shadow: red 10px 30px 5px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>Code effect
css shadow border usage syntax:
Attribute: box-shadow
How to use: div{box-shadow: 001px #000inset;}
Shadow usage analysis: The first zero represents a distance of 0 from the left side of the object, and Start to display the shadow. The second zero means that the distance object is 0, and the shadow starts to be displayed. 1px represents the range of the shadow. 1px, #000 represents The color of the shadow, inset means the shadow inside the object, and no shadow is set outside the object.
Compatibility issue: Firefox version 3.5 and Google can support the box-shadow attribute.
Recommended learning: CSS video tutorial
The above is the detailed content of How to set title shadow border in css. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
