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

Most people don't understand the knowledge points of this "very practical CSS code segment" article, so Xiaobian summarizes the following contents for everyone. The contents are detailed, the steps are clear, and they have certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this "very practical CSS code segment" article.

html

css

If you don't understand the code in the above picture, please look at the following picture. I will comment out one line of code and you will understand. It turns out to be a dot element, which moves cyclically along the Y axis. Hide it so you can see the loaded animation effect.

When you need such an upload file button, do you think about finding a design to get a picture, or write one yourself???

CSS writing is also very simple.

When we want to add a projection to a rectangle or other shape that can be generated by border-radius, we can use box-shadow to solve it, as shown below:

However, box-shadow is a bit overpowered when elements are decorated with pseudo-elements or translucency, because border-radius shamelessly ignores transparency. Such cases include the following:

Translucent images, background images, or border-images (such as old-fashioned gold frames);

2. The element has a dotted, dashed, or translucent border, but no background (or when the background-clip is not a border-box);

3. Dialogue bubbles, whose small tails are usually generated by pseudo-elements;

4, almost all the corner effect

5. Shape generated by clip-path.

Here's an example: html code

CSS style

As you can see from the picture above, box-shadow can't handle it, drop-shadow can handle it. Why was that?

You can see the difference, why is that? Here I use the div tag, we all know, div tag is a block tag, to put it bluntly is a box model, refers to a region, box-shadow attributes can only be added to the outside of the box model, so the internal things are not added, it becomes the image above, the middle or white part. Drop-shadow is different. It makes all the non-transparent areas shadow, which is equivalent to a real projection.

Often see some Dialog in the web page, for example, some web pages click login registration will pop up a pop-up box to display the login registration page, the following use css to complete a self-adaptive, regardless of the size of the window, always able to maintain the horizontal vertical center of the dialog.

CSS style

The above is about the content of this article "What are the very practical CSS code segments?" I believe everyone has a certain understanding. I hope the content shared by Xiaobian will help everyone. If you want to know more relevant knowledge content, please pay attention to 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.