Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to set frame shadow in html". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Basic syntax for border shading (box-shadow):

Box-shadow:color h-shadow v-shadow blur spread inset

Color: shadow color-optional

H-shadow: horizontal offset-required

V-shadow: vertical offset-required

Blur: blur distance-optional

Spread: shadow size-optional

Inset: inner Shadow-optional

Example:

Css Code:

.div1 {width:200px; height:200px; margin:20px auto; line-height: 200px; text-align: center; background: cadetblue; border:2px solid darkslategray; box-shadow: darkgrey 10px 10px 30px 5px; / / Border Shadow}

HTML Code:

Border shadow exampl

The effect is as follows:

Box-shadow Shadow description:

Attribute description (corresponding in order):

X axis of shadow (negative values can be used) Y axis of shadows (negative values can be used) Shadow Blur value (size) Color of Shadow

The default is outer shadow

Inner Shadow: inset can be set to Internal Shadow

Note:

This property is used in box models such as (div,p,h1,h2,h3,h4,h5,h6, etc.) not to set text shadows, because it is a new property. In order to be compatible with all major browsers and support lower versions of these main browsers, we need to write the name of the property as follows when using the box-shadow attribute on mainstream browsers:

Google:-webkit-box-shadow

Firefox:-moz-box-shadow

Opera:-o-box-shadow

IE > 9:-ms-box-shadow

This is the end of "how to set Border Shadows in html". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.