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

This article mainly introduces html5 how to add gradient frame effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

1. Frame and background

Translucent border

.demo {

Background-color: # fff

Border: rgba (255,255,255,0.5) 10px solid

Background-clip: padding-box

}

Tip summary: use the background clipping property to display the background without a border

Background-clip: cut the background, which is divided according to css's box model:

Border-box (background included in border)

Padding-box (background contains only to margins)

Content-box (background contains only content)

Multiple borders

.demo {

Outline: # fff 1px dashed

Outline-offset:-10px

}

Skill induction

Outline: a line drawn around an element, on the periphery of the edge of the border

Outline-offset: sets the offset position of the profile

Fillet inside the border

.demo {

Border-radius: 8px

Box-shadow: 0 0 0 8px # 655

}

Skill induction: using the characteristics of shadows to achieve

Box-shadow:h-shadow (position of horizontal Shadow) v-shadow (position of Vertical Shadow) blur (Blur distance) spread (Shadow size) color (Shadow Color) inset (Inner Shadow)

Stripe effect

.demo {

Background: linear-gradient (to right, # fb3 50%, # 58a 0)

Background-size: 30px 100%

}

Skill induction: using the characteristics of linear gradient to achieve

Linear-gradient: (gradient direction, start color, end color, end color, start position) to be honest, it really takes a lot of experience to understand--

Background-size: setting the background size

.demo {

Background: repeating-linear-gradient (45deg, # fb3 0 30px / fb3 15px / 58a / 15px / 58a 30px)

}

Skill induction: using the characteristics of repetitive linear gradient to support angle setting

Ant march

This effect has been achieved with svg before, and it turns out that css3 is also possible. The principle here is realized with multiple backgrounds, and you need to understand the properties of background. (for dynamic effect, please visit Ant Marching effect)

.demo {

Width: 200px

Height: 100px

Padding: 20px

Border: 1px solid transparent

Background-image:

Linear-gradient (white,white)

Repeating-linear-gradient (- 45deg, black 0, black 25%, white 25%, white 50%)

Background-size: 20px 20px

Background-clip: padding-box,border-box

Background-position: 0

Animation: ants 12s linear infinite

}

@ keyframes ants {

To {

Background-position: 100%

}

}

2. Shape

Ellipse

Adaptive ellipse

.demo {

Border-radius: 50% / 50%

}

Skill summary: border-radius supports 2 parameters, namely Abscissa and ordinate. It can be a pixel or a percentage

Semi-ellipse

.demo {

Border-radius: 100% 00% / 50% 00 50%

}

Skill summary: border-radius supports 8 parameters, which are upper left, upper right, lower left, lower right.

1/4 circle

.demo {

Border-radius: 0100% 00

}

Triangle

.demo {

-webkit-clip-path: polygon (0100%, 50%, 100%)

}

.demo: hover {

-webkit-clip-path: circle (100px at 50%)

}

Summary of skills: clip-path cutting path

Chamfer

.demo {

Background: linear-gradient (135deg, transparent 15px, # 58a 0) top left

Linear-gradient (- 135deg, transparent 15px, # 655 0) top right

Linear-gradient (- 45deg, transparent 15px, # 58a 0) bottom right

Linear-gradient (45deg, transparent 15px, # 655 0) bottom left

Background-size: 50%

Background-repeat: no-repeat

}

Folding angle

.demo {

Background: linear-gradient (- 135deg, transparent 15px, rgba) no-repeat 100% / 21.4px 21.4px

Linear-gradient (- 135degjiming 15px, # 58a 0)

}

3. Projection

Unilateral projection

.demo {

Background-color: # fffbbb

Box-shadow: 0 6px 4px-4px rgba (0,0,0,0.5)

}

Bilateral projection

.demo {

Box-shadow: 6px 0px 4px-4px rgba (0,0,0,0.5)

-6px 0px 4px-4px rgba (0,0,0,.5)

}

Thank you for reading this article carefully. I hope the article "how to add a gradient frame effect in html5" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you 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.