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

Today, the editor will share with you the relevant knowledge of css3 selector, frame, fillet, background and gradient method. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Css3 selector related:

Section > div direct child element selector

Div + article neighbor sibling selector (appears after the element)

Div ~ article universal sibling selector (appears after the element)

Property Selector:

A [href] {text-decoration: none;} a [href= "#"] {color: # f00;} / * contains two and property values are separated by spaces: * / a [class~= "two"] {color: # ff0;} / * the first value of the attribute begins with #: * / a [ff0; ^ = "#"] {color: # 0f0;} / * ends with #: * / a [href$= "#"] {color: # 00f } / * contains #: * / a [href*= "#"] {color: # 0ff;} / * the first attribute value begins with # -: * / a [href | = "#"] {color: # f0f;}

Pseudo-class of UI element:

Input:disabled

Input:enabled

Input:checked

Div:first-child matches the first child element belonging to its parent element and is div. It counts regardless of type and displays the time division type.

Div:last-child matches the last child element belonging to its parent element and is div, regardless of type when counting, displays time division type div:nth-child (2) matches the nth child element belonging to its parent element and is div, shows time division type div:nth-lat-child (2) matches the nth child element belonging to its parent element and is div, counts regardless of type, shows time division type

N matches the subscript, starting with 0:

Li:nth-child (2n) even number

Li:nth-child (2n+1) singular

Li:nth-child (nasty 4)

Li:nth-child (odd) is odd, with the subscript calculated from 1

Li:nth-child (even) is even, with the subscript calculated from 1

The penultimate third of li:nth-last-child (3)

Article:only-child is the only element of the parent element and is article (without any other child elements)

Div:nth-of-type (2) matches the second child element belonging to its parent element and is div, counting the time division type

Div:nth-last-of-type (2)

Div:first-of-type div:last-of-type

Article:only-of-type belongs to the only article element of the parent element (can have other types of child elements)

Div:empty has no div elements of child elements (including no text)

A:not (: last-of-type) is not the last a child element

The weight of id selector is more important than attribute selector

.red > [class= "red"]

Css pseudo elements:

The style after the div::selection text is selected

::-moz-selection Firefox

Css3 borders and fillets:

The four values are clockwise.

Border-radius compatibility:

-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%; border-radius: 50%

Box-shadow horizontal offset vertical offset blur extended color interior

Box-shadow: 50px 30px 0px 0px yellow inset

Border-image-repeat:stretch (stretch) / repeat (repeat) / round (full) / initial/inherit

Border-image-source: url ("border.jpg"); border-image-slice: 50% border-image-width * inward offset of image boundary * / border-image-width: 50% * width of image boundary * / border-image-outset: 2; / * draw outside the border * / border-image-repeat: repeat

Css3 background and gradient:

Background drawing area (display range)

Background-clip: border-box;background-clip: padding-box;background-clip: content-box

Background image location (starting position, origin position, used in conjunction with offset)

Background-origin: border-box;background-origin: padding-box;background-origin: content-box;background-position:10px 10px; / * used with offset * /

Background-size writes only one value, and the second default is auto, which is scaled proportionally.

Background-size: contain; / * scale to one side to reach the edge of the container * / background-size: cover;/* proportional zoom to fill the container * / background-size: 800px 500px

Background-image multiple backgrounds, the front will cover the back

Background-image: url ('bg2.png'), url (' bg1.jpg')

Demo:

Background-image div {width:300px; height:300px; background:url (1.jpg) no-repeat center top, url (2.jpg) no-repeat center 100px, url (3.jpg) no-repeat center 200px; margin:0 auto;}

The default gradient is from top to bottom:

Div {width: 800px; height: 500px; background:-webkit-linear-gradient (red, blue); background:-moz-linear-gradient (red, blue); background:-o-linear-gradient (red, blue); background: linear-gradient (red, blue);}

Gradient from left to right

Div {width: 800px; height: 500px; background:-webkit-linear-gradient (left, red, blue); background:-moz-linear-gradient (right, red, blue); background:-o-linear-gradient (right, red, blue); background: linear-gradient (to right, red, blue);}

Diagonal gradient from the upper left corner

Div {width: 800px; height: 500px; background:-webkit-linear-gradient (left top, red, yellow, blue); background:-moz-linear-gradient (right bottom, red, yellow, blue); background:-o-linear-gradient (right bottom, red, yellow, blue); background: linear-gradient (to right bottom, red, yellow, blue);}

Angle control direction

Angle gradient is the angle between the horizontal line and the gradient line, 0deg is from bottom to top, 90 degrees is from left to right

Div {width: 800px; height: 500px; background:-webkit-linear-gradient (135deg, red, yellow, blue); background:-moz-linear-gradient (135deg, red, yellow, blue); background:-o-linear-gradient (135deg, red, yellow, blue); background: linear-gradient (135deg, red, yellow, blue);}

Gradient specific position control

Div {width: 800px; height: 500px; background:-webkit-linear-gradient (90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%); background:-moz-linear-gradient (90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%) Background:-o-linear-gradient (90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%); background: linear-gradient (90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);}

Transparent color gradient

Div {width: 800px; height: 500px; background:-webkit-linear-gradient (90deg, rgba (255,0,0,0), rgba (255,0,0,1); background:-moz-linear-gradient (90deg, rgba (255,0,0,0), rgba (255,0,0,1); background:-o-linear-gradient (90deg, rgba (255,0,0,0), rgba (255,0,0,1)) Background: linear-gradient (90deg, rgba (255,0,0,0), rgba (255,0,0,1);}

Repeat gradient

Div {width: 800px; height: 500px; background:-webkit-repeating-linear-gradient (90deg, red 0%, blue 10%, red 20%); background:-moz-repeating-linear-gradient (90deg, red 0%, blue 10%, red 20%); background:-o-repeating-linear-gradient (90deg, red 0%, blue 10%, red 20%); background: repeating-linear-gradient (90deg, red 0%, blue 10%, red 20);}

Radial gradient, from inside to outside

Div {width: 800px; height: 500px; background:-webkit-radial-gradient (red, blue); background:-moz-radial-gradient (red, blue); background:-o-radial-gradient (red, blue); background: radial-gradient (red, blue);}

Circular gradient

Div {width: 800px; height: 500px; background:-webkit-radial-gradient (circle, red, blue); background:-moz-radial-gradient (circle, red, blue); background:-o-radial-gradient (circle, red, blue); background: radial-gradient (circle, red, blue);}

Elliptic gradient

Div {width: 800px; height: 500px; background:-webkit-radial-gradient (ellipse, red, blue); background:-moz-radial-gradient (ellipse, red, blue); background:-o-radial-gradient (ellipse, red, blue); background: radial-gradient (ellipse, red, blue);}

Gradient from the center of the circle to the nearest edge

Div.closest-side {width: 300px; height: 200px; margin: 50px; background:-webkit-radial-gradient (30% 70%, circle closest-side, red, blue); background:-moz-radial-gradient (30% 70%, circle closest-side, red, blue); background:-o-radial-gradient (30% 70%, circle closest-side, red, blue); background: radial-gradient (30% 70%, circle closest-side, red, blue);}

The gradient changes from the center of the circle to the farthest edge

Div.farthest-side {width: 300px; height: 200px; margin: 50px; background:-webkit-radial-gradient (30% 70%, farthest-side, red, blue); background:-moz-radial-gradient (30% 70%, farthest-side, red, blue); background:-o-radial-gradient (30% 70%, farthest-side, red, blue); background: radial-gradient (30% 70%, farthest-side, red, blue);}

Gradient from the center of the circle to the nearest corner

Div.closest-corner {width: 300px; height: 200px; margin: 50px; background:-webkit-radial-gradient (30% 70%, closest-corner, red, blue); background:-moz-radial-gradient (30% 70%, closest-corner, red, blue); background:-o-radial-gradient (30% 70%, closest-corner, red, blue); background: radial-gradient (30% 70%, closest-corner, red, blue);}

Gradient from the center of the circle to the farthest angle

Div.farthest-corner {width: 300px; height: 200px; margin: 50px; background:-webkit-radial-gradient (30% 70%, farthest-corner, red, blue); background:-moz-radial-gradient (30% 70%, farthest-corner, red, blue); background:-o-radial-gradient (30% 70%, farthest-corner, red, blue); background: radial-gradient (30% 70%, farthest-corner, red, blue);}

IE gradient from top to bottom

Div {width: 800px; height: 500px; filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#ff0000', endColorstr='#0000ff',GradientType=0);}

IE gradient from left to right

Div {width: 800px; height: 500px; filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1);}

Demo:

Linear gradient-Special case div {width: 800px; height: 500px; background: # abcdef; background-size: 50px 50px Background-image:-webkit-gradient (linear, 00,100%, color-stop (.25, # 555), color-stop (.25, transparent), to (transparent),-webkit-gradient (linear, 0100%, 100%, color-stop (.25, # 555), color-stop (.25, transparent), to (transparent),-webkit-gradient (linear, 00,100%, color-stop (.75, transparent)) Color-stop (.75, # 555),-webkit-gradient (linear, 0100%, 100%, color-stop (.75, transparent), color-stop (.75, # 555)) Background-image:-moz-linear-gradient (45deg, # 555 25%, transparent 25%, transparent),-moz-linear-gradient (- 45deg, # 555 25%, transparent 25%, transparent),-moz-linear-gradient (45deg, transparent 75%, # 55575%),-moz-linear-gradient (- 45deg, transparent 75%, # 55575%) Background-image:-o-linear-gradient (45deg, # 555 25%, transparent 25%, transparent),-o-linear-gradient (- 45deg, # 555 25%, transparent 25%, transparent),-o-linear-gradient (45deg, transparent 75%, # 55575%),-o-linear-gradient (- 45deg, transparent 75%, # 55575%) Background-image: linear-gradient (45deg, # 555 25%, transparent 25%, transparent), linear-gradient (- 45deg, # 555 25%, transparent 25%, transparent), linear-gradient (45deg, transparent 75%, # 55575%), linear-gradient (- 45deg, transparent 75%, # 55575%) } that's all about the article "css3 selectors, borders, rounded corners, backgrounds and gradients". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.