Shulou(Shulou.com)06/03 Report--

This article mainly shows you "css how to set the title shadow border", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "css how to set the title shadow border" this article.

Methods: 1, use the border attribute to add a border to the title element, syntax "border: width style color;"; 2, use "text-align: center" to achieve the title text center; 3, use the box-shadow attribute to add shadow effect to the border of the title element.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

How does css set the title shadow border?

Let's talk about how to add shaded borders to the title of css.

Div {width:200px; height:200px; border:2px solid red; text-align: center; margin: 20px auto; line-height: 200px; box-shadow: red 10px 30px 5px;}

Code effect

The css shadow border uses syntax:

Attribute: box-shadow

How to use: div {box-shadow: 001px # 000inset;}

Shadow use method analysis: the first zero represents the distance to the left of the object is 0, and starts to display shadows, the second zero means that the distance object is 0, the shadow begins to be displayed, 1px represents the range of shadows 1px, the shadow represents the color of shadows, inset represents shadows inside the object, and shadows are not set outside the object.

Compatibility issue: both Firefox version 3.5 and Google can support the box-shadow attribute.

The above is all the content of the article "how to set the title Shadow Border in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.