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

This article mainly talks about "what are the border skills of CSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the border skills of CSS"?

1. Animated CSS border

What should we do when we want to make our project more visible?

Let's animate it!

We can animate our borders, even without changing the size of the elements, which is very simple.

To do this, we just need to create a custom keyframe for the animation and use it in the animation (animation) parameter in the element's CSS code.

Let's look at an example. The HTML is as follows:

Programming is suitable for people who have different ideas. For people who want to create big things and are willing to change the world.

Write CSS and animation:

@ keyframes animated-border {0% {box-shadow: 00 rgba;} 100% {box-shadow: 00 20px rgba;}} # box {animation: animated-border 1.5s infinite; font-family: Arial; font-size: 18px; line-height: 30px; font-weight: bold; color: white; border: 2px solid; border-radius: 10px; padding: 15px;}

The effect is as follows:

2. CSS image frame

Have you ever imagined that there are doughnuts around your elements?

Now you can add them through pure CSS without too much coding.

To do this, you need to use the border-image attribute in the element's CSS code.

Let's look at an example, or the previous HTML:

Programming is suitable for people who have different ideas. For people who want to create big things and are willing to change the world.

Write a CSS:

# box {font-family: Arial; font-size: 18px; line-height: 30px; font-weight: bold; color: white; border: 40px solid transparent; border-image: url (https://image.flaticon.com/icons/svg/648/648787.svg); border-image-slice: 100%; border-image-width: 60px; padding: 15px;}

The effect is as follows:

3. Snake CSS frame

What if we need a two-color super visual border?

We can put on snake clothes and color it as much as we want.

# box {font-family: Arial; font-size: 18px; line-height: 30px; font-weight: bold; color: white; padding: 15px; border: 10px dashed # FF5722; background: linear-gradient (to top, green, 10px, transparent 10px), linear-gradient (to right, green, 10px, transparent 10px), linear-gradient (to bottom, green, 10px, transparent 10px), linear-gradient (to left, green, 10px, transparent 10px) Background-origin: border-box;}

The effect is as follows:

4. Ladder style CSS border

Have you ever tried to add 3D-style borders around div?

It's very easy to add some multicolor depth to our elements, we just need to add some square shadows to the CSS.

Let's test our example!

# box {font-family: Arial; font-size: 18px; line-height: 30px; font-weight: bold; color: white; padding: 40px Box-shadow: inset # 009688 00 0 5px, inset # 059c8e 00 0 1px, inset # 0cab9c 00 0 10px, inset # 1fbdae 00 0 11px, inset # 8ce9ff 00 0 16px, inset # 48e4d6 00 0 17px, inset # e5f9f7 00 0 21px, inset # bfecf7 00 0 22px}

Effect:

5. Only shadow CSS border

Sometimes we need to add a border to an off-the-shelf design, but adding more pixels can be problematic, which may change the location of the element.

Now we can use the box shadow around the element as a border and take a look at the code.

# box {font-family: Arial; font-size: 18px; line-height: 30px; font-weight: bold; color: white; padding: 40px; border-radius: 10px; box-shadow: 2000 10px white;}

Effect:

6. CSS border with shadows and outlines

We can achieve a similar effect to the snake in several ways. Next, one of them is to mix the box-shadow and outline attributes in the element CSS.

Let's see.

# box {font-family: Arial; font-size: 18px; line-height: 30px; font-weight: bold; color: white; padding: 40px; box-shadow: 00 10px white; outline: dashed 10px # 00988;}

Effect:

7. A few shadows and contours

We can even create some colors and elements in the border.

To do this, we need to mix shadows and contours, as shown in the following example.

Let's have a try.

# box {font-family: Arial; font-size: 18px; line-height: 30px; font-weight: bold; color: white; padding: 40px; box-shadow: 00 1px # 009688, 000 5px # F44336,000 9px # 673AB7, 000 10px # 00988; outline: dashed 10px # 00988;}

Effect:

8. Double CSS border with shadow

We can also mix some box-shadow and outline borders.

This creates a beautiful line effect with spikes, as shown in the following example.

Let's check the code!

# box {font-family: Arial; font-size: 18px; line-height: 30px; font-weight: bold; color: white; padding: 40px; box-shadow: 00 10px # 00988; border: 10px solid # 00988; outline: dashed 10px white;}

Effect:

9. Multicolor CSS border

What if we want to add more color to the border than the previous example?

We can even set each side of the element to a different color.

To do this, we will need some custom backgrounds with gradients.

Look at the following example.

# box {font-family: Arial; font-size: 18px; line-height: 30px; font-weight: bold; color: white; padding: 40px Background: linear-gradient (to top, # 4caf50, # 4caf50 10px, transparent 10px), linear-gradient (to right, # c1ef8c, # c1ef8c 10px, transparent 10px), linear-gradient (to bottom, # 8bc34a, # 8bc34a 10px, transparent 10px), linear-gradient (to left, # 009688, # 009688 10px, transparent 10px); background-origin: border-box;}

Effect:

At this point, I believe you have a deeper understanding of "what are the border skills of CSS?" 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.