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

This article mainly introduces the relevant knowledge of "what are the skills for the use of CSS frames". The editor shows you the operation process through actual cases, the method of operation is simple and fast, and it is practical. I hope that this article "what are the skills for the use of CSS frames" can help you solve the problem.

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: 0.000 rgba (255pr. 255pr. 0.40)

}

100% {

Box-shadow: 0 000 20px rgba (255 pyrrine 255 pyrrine 0)

}

}

# 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 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 0 0 0 1px

Inset # 0cab9c 0 0 0 10px

Inset # 1fbdae 0 0 0 11px

Inset # 8ce9ff 0 0 0 16px

Inset # 48e4d6 0 0 0 17px

Inset # e5f9f7 0 0 0 21px

Inset # bfecf7 0 0 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: 0 0 0 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: 0 0 0 10px white

Outline: dashed 10px # 009688

}

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 0 1px # 009688

0 0 0 5px # F44336

0 0 0 9px # 673AB7

00 0 10px # 009688

Outline: dashed 10px # 009688

}

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 0 10px # 009688

Border: 10px solid # 009688

Outline: dashed 10px white

}

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

}

This is the end of the content about "what are the skills for using CSS frames". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.