Introduction to web front end to practice: css3 foundation - selector + border and fillet + background and gradient

Css3 * * selector related:**

Section > div direct child element selector

div + article adjacent sibling selector (appears after element)

div ~ article universal sibling selector (appears after 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 property begins with ':*/
a[href^="#"] {
    color: #0f0;
}
/*End with:*/
a[href$="#"] {
    color: #00f;
}
/*Include:*/
a[href*="#"] {
    color: #0ff;
}
/*The first property value begins with a "-":*/
a[href|="#"] {
    color: #f0f;
}
//Specially established learning Q-q-u-n: 784783012, sharing learning methods and small details that need attention, constantly updating the latest tutorials and learning skills
(From zero foundation to front-end project practice course, learning tools, full stack development learning route and planning)

UI element pseudo class:

Input:disabled

Input:enabled

Input:checked

div: the first child match belongs to the first child element of its parent element and is a div. the counting time is not divided into types and the time division type is displayed

Div: last child matching belongs to the last child element of its parent element and is div, counting time is not divided into types, display time division type div: nth child (2) matching belongs to the nth child element of its parent element and is div, count time is not divided into types, display time division type div: nth lat child (2) matching belongs to the nth child element of its parent element and is div, count time is not divided into types, display time division type

n Match subscript, calculated from 0:

Li: nth child (2n) double

Li: nth child (2n + 1) singular

li:nth-child(n+4)

Li: nth child (odd) odd, subscript starts from 1

Li: nth child (even) even number, subscript starts from 1

Li: nth last child (3)

Article: only child is the only element of the parent element and is an article (no other child elements)

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

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

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

Article: only of type is the only article element of the parent element (there can be other types of child elements)

div:empty a div element without child elements (including text)

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

id selector weight is greater than attribute selector

.red > [class="red"]

Css pseudo element:

Style after div::selection text is selected

:: - Moz selection Firefox

Css3 * * border and fillet:**

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 inner

box-shadow: 50px 30px 0px 0px yellow inset;

Border image repeat: stretch / repeat / round / initial/inherit

border-image-source: url("border.jpg");
    border-image-slice: 50%;/*Image boundary offset inward*/
    border-image-width: 50%;/*Width of image boundary*/
    border-image-outset: 2; /*Draw outside 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 positioning (start position, origin position, used with offset)

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

Background size only writes one value. The second default value is auto, which is scaled proportionally

background-size: contain; /*To scale to one side to reach the edge of a container*/
background-size: cover;/*Scale to fill container*/
background-size: 800px 500px;
background-size: 800px;
background-size: 50% 50%;
background-size: 50%;
background-size: 100% 100%;
background-size: 100%;

Background image multiple backgrounds, the former will cover the latter

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

demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>background-image</title>
    <style type="text/css"> 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;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Default gradient 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);
}

Left to right gradient

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 top left

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 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);
}
//Specially established learning Q-q-u-n: 784783012, sharing learning methods and small details that need attention, constantly updating the latest tutorials and learning skills
(From zero foundation to front-end project practice course, learning tools, full stack development learning route and planning)

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 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));
}

Repeated 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 out

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);
}

Oval 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 center to 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);
}

Gradient from center to farthest edge

Specially established learning Q-q-u-n:  784783012 ´╝îShare learning methods and small details that need attention, and keep updating the latest tutorials and learning skills
(From zero foundation to front-end project practice course, learning tools, full stack development learning route and planning)
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 center to nearest angle

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 center to 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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Linear gradient - Special case</title>
<style type="text/css"> div { width: 800px; height: 500px; background: #abcdef; background-size: 50px 50px; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
        -webkit-gradient(linear, 0 100%, 100% 0, 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%, #555 75%),
        -moz-linear-gradient(-45deg, transparent 75%, #555 75%); 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%, #555 75%),
        -o-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
        linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
        linear-gradient(45deg, transparent 75%, #555 75%),
        linear-gradient(-45deg, transparent 75%, #555 75%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Tags: Web Development css3 IE Attribute Firefox

Posted on Sun, 05 Apr 2020 15:05:11 -0700 by ajcalvert