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

Editor to share with you how to use the css style, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Html code. If you want to see that css style, use the corresponding className.

Css fallback style

YES!

OK!

Cancel!

Hello

World

!!!

Hello

World

!!!

Translucent border

Multiple borders

Inner fillet

Striped background

Realization of Lattice background

Envelope background

Ant marching frame

Elliptic fillet

Create a parallelogram using pseudo elements

Chamfering effect

At present, there is no effect.

Hyphenation effect: hello my name is kangkang,welcome to China!

Text external luminous effect

Css code

.box1 {

Height: 25em

Width: 20em

Background: rgb (255,128,0)

Background:-moz-linear-gradient (0deg, yellow, red)

Background:-o-linear-gradient (0deg, yellow, red)

Background:-webkit-linear-gradient (0deg, yellow, red)

Background: linear-gradient (90deg, yellow, red)

Float: left

}

H2 {

Color: gray

}

@ supports (text-shadow: 00.3em gray) {

H2 {

Color: transparent

Text-shadow: 0 0 .3em gray

}

}

Button {

Padding: .3em .8em

Border: 1px solid rgba (0J. 0J. 1)

Background: # 58a linear-gradient (hsla (0mine0% Person100% transparent), transparent)

Border-radius: .2em

Box-shadow: 0.05em .25em rgba (0penny 0penny .5)

Color: white

Text-shadow: 0-.05em .05em rgba.

Font-size: 125%

Line-height: 1.5

}

Button.ok {

Background-color: # 6b0

}

Button.cancel {

Background-color: # c00

}

Ul {--accent-color: purple;}

Ol {--accent-color: rebeccapurple;}

Li {background: var (--accent-color);}

.box2 {

Width: 10em

Height: 8em

Float: left

Border: 10px solid hsla (0. 0%. 100%. 5)

Background-clip: padding-box

Margin: 2em

}

.box3 {

Width: 10em

Height: 8em

Background: yellowgreen

Box-shadow: 0 0 0 10px # 655

0 0 0 15px deeppink

0 2px 5px 15px rgba (0pd0re0p0pl .6)

Float: left

Margin: 2em

}

.box4 {

Width: 10em

Height: 8em

Background: tan

Border-radius: .8em

Padding: 1em

Box-shadow: 0 0 0 .6em # 655

Outline: .6em solid # 655

Float: left

}

.box5 {

Width: 10em

Height: 8em

Float: left

Margin: 2em

Background: linear-gradient (45deg

# fb3 25%, # 58a 0, # 58a 50%

# fb3 0, # fb3 75%, # 58a 0)

Background-size: 30px 30px

}

.box6 {

Width: 10em

Height: 8em

Float: left

Background: # 655

Background-image: radial-gradient (tan 30%, transparent 0)

Radial-gradient (tan 30%, transparent 0)

Background-size: 30px 30px

Background-position: 0 0, 15px 15px

}

.box7 {

Width: 10em

Height: 8em

Float: left

Padding: 1em

Border: 1em solid transparent

Background: linear-gradient (white, white) padding-box

Repeating-linear-gradient (- 45deg

Red 0, red 12.5%

Transparent 0, transparent 25%

# 58a 0, # 58a 37.5%

Transparent 0, transparent 50%)

0 / 5em 5em

}

@ keyframes ants {to {background-position}}

.box8 {

Width: 10em

Height: 8em

Float: left

Margin: 2em

Padding: 1em

Border: 1px solid transparent

Background:

Linear-gradient (white, white) padding-box

Repeating-linear-gradient (- 45deg

Black 0, black 25%, white 0, white 50%

) 0 / .6em .6em

Animation: ants 12s linear infinite

}

.box9 {

Width: 10em

Height: 8em

Float: left

Background: blue

Border-radius: 50% / 50%

}

.box10 {

Width: 10em

Height: 8em

Float: left

Position: relative

}

.box10:: before {

Margin-left: 2em

Content:''; / * generate a rectangle with pseudo elements * /

Position: absolute

Top: 0; right: 0; bottom: 0; left: 0

Z-index:-1

Background: # 58a

Transform: skew (45deg)

}

.box11 {

Margin-left: 5em

Width: 10em

Height: 8em

Float: left

}

Img {

Clip-path: polygon (50% 0, 100% 50%

50% 100%, 0 50%)

Transition: 1s clip-path

}

Img:hover {

Clip-path: polygon (00,100%)

100% 100%, 0 100%)

}

.box12 {

Width: 10em

Height: 8em

Float: left

Margin-left: 2em

Background: # 58a

Background:

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

Right

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

If left;/* uses radial gradient radial-gradient (), it becomes arc chamfer * /

Background-size: 50% 100%; / * background size, the first is width, the second is height * /

Background-repeat: no-repeat

}

.box13 {

Margin-top: 3em

Width: 10em

Height: 8em

Margin-left: 2em

Font-variant-ligatures: common-ligatures

Discretionary-ligatures

Historical-ligatures

Float: left

}

.box14 {

Width: 10em

Height: 8em

Margin-left: 3em

Background: # 203

Color: # ffc

Text-shadow: 0 0 .1em, 0 0 .3em

Float: left

}

.box14 a {

Background: # 203

Color: white

Transition: 1s

}

.box14 a:hover {/ *: hide the text itself in hover, then it really looks like it is slowly blurring * /

Color: transparent

Text-shadow: 0 0 .1em white, 0 0 .3em white

}

The above is all the content of this article "how to use css style". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow 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.