How to use css style
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!
