search

Home >Web Front-end >CSS Tutorial >How to set title shadow border in css

How to set title shadow border in css

奋力向前
奋力向前Original
2021-09-09 11:33:074363browse

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.

How to set title shadow border in css

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

How to set title shadow border in css

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!

html5 css css3 对象 border
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
Previous article：How to add background to text in cssNext article：How to add background to text in css

Related articles

See more