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

This article introduces the relevant knowledge of "how to make shadow effects with css". 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!

1. First of all, we add two div boxes to the newly created html file, as follows:

Css makes shadow effect

two。 When we finish creating and adding, after we add the img tag in the first box, we can select a picture we like and add it to the img folder in the project, when we come to the code block

Add the picture path src= "(pictures in the img folder)" in the, and add to the second div

The label, code and effect are as follows:

Css makes shadow effect

Css makes shadow effect

3. So let's take the next step for the practice shadow effect, add the class attributes of class and id to the first and second div, and name them shadow-img and shadow-txt, respectively, and continue to add link tags to connect to css in preparation. The code is as follows:

Html > css to make shadow effect

Css makes shadow effect

4. When we are done, we begin to write the css effect code. According to the width and height of the picture, we set the width and height of the first div so that we can display the shadow effect, and set the text size in the second div to make it more obvious. The code is as follows:

.shadow-img {/ * need to define the width and height of the picture element first * / width: 330pxposition height: 326pxashing * in box-shadow Shadow distance to the left, shadow distance to the top, shadow ambiguity shadow color * / box-shadow: 10px 10px 50px dimgrey;} # shadow color {margin-top: 50px; font-size: 50px Shadow font left distance, shadow font top distance, shadow font blur shadow font color * / text-shadow: 10px 5px 15px slategrey;}

5. We use box-shadow and txt-shadow in the css code, both of which are used to set shadows, and the values are annotated in the text.

This is the end of "how to make Shadow effects with css". 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.