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

This article mainly explains "how to set the shadow at the top of the page in CSS". Friends who are interested may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to set the shadow at the top of the page by CSS.

1. Black and white image

This code will make your color photos appear as black and white photos, isn't it cool?

Img.desaturate {

Filter: grayscale (100%)

-webkit-filter: grayscale

-moz-filter: grayscale

-ms-filter: grayscale

-o-filter: grayscale

}

two。 Use: not () to apply / unapply borders on menus

Add a border to each menu item first

/ * add border * /

.nav li {

Border-right: 1px solid # 666

}

…… And then remove the last element.

/ / remove border /

.nav li:last-child {

Border-right: none

}

…… You can directly use the: not () pseudo class to apply the element:

.nav li:not (: last-child) {

Border-right: 1px solid # 666

}

This makes the code clean, easy to read, and easy to understand.

Of course, if your new element has a sibling element, you can also use the general sibling selector (~):

.. nav li:first-child ~ li {

Border-left: 1px solid # 666

}

3. Shadow at the top of the page

Body:before {

Content: ""

Position: fixed

Top:-10px

Left: 0

Width: 100%

Height: 10px

-webkit-box-shadow: 0px 0px 10px rgba (0pc0pl 0pr .8)

-moz-box-shadow: 0px 0px 10px rgba (0pc0pl 0pr .8)

Box-shadow: 0px 0px 10px rgba (0pd0j0j0pl .8)

Z-index: 100

}

4. Everything is vertically centered.

Html, body {

Height: 100%

Margin: 0

}

Body {

-webkit-align-items: center

-ms-flex-align: center

Align-items: center

Display:-webkit-flex

Display: flex

}

Look, isn't it easy.

Note: beware of flexbox in IE11.

5. Comma separated list

Make the html list items look like a real, comma-separated list:

Ul > li:not (: last-child):: after {

Content: ",

}

Use the: not () pseudo class for the last list item.

6. Use SVG with icons

There is no reason why we should not use SVG for icons:

.logo {

Background: url ("logo.svg")

}

SVG is scalable for all resolution types and supports all browsers to return to IE9. This avoids .png, .jpg, or .gif files.

7. Disable mouse events

CSS3's new pointer-events allows you to disable mouse events for elements, for example, a connection cannot be clicked if it is set to the following style.

.disabled {pointer-events: none;}

At this point, I believe you have a deeper understanding of "CSS how to set the shadow at the top of the page". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.