A, border

1.1 border-radiusRounded corners

1. The value of border-radius can be absolute unit px, relative unit EM, rem, or percentage. The greater the value, the greater the radian.

2. When the number of attribute values is different, the performance is also different. For details, please refer to the picture.

3. You can also set the radian of a single corner, such as border-top-right-radius:5px; Border – bottom – left – the radius: 5 px.

1.2 box-shadowshadow

Box-shadow: X-axis offset Y-axis offset X-axis blur radius Y-axis blur radius shadow color;

2. The offset value of X-axis and Y-axis can be negative, but cannot share one. The shadow radius of X-axis and Y-axis can share one, but cannot be negative.

Box-shadow: 10px 10px # CCC; box-shadow: 10px 10px # CCC Such, still can have shadow, but lost this kind of fuzzy hazy effect, stereo feeling also abate greatly, won’t use so commonly.

1.3 box-sizingProperties allow you to define a particular element that matches a particular region in a particular way. This is a bit of a catchy phrase, but let’s use diagrams to illustrate it.

    box-sizing:content-box/border-box/inherit
Copy the code

The basic structure of the box model is shown in the figure. When we set the width and height, box-sizing attribute is used. When the attribute value is content-box, the width and height value is content. Border-box: border-padding +content; border-box: border-padding +content; border-box: border-padding +content; border-box: border-padding +content; Attribute to inherit, the value of box-sizing is inherited from the parent element.

Second, the background

2.1 background-image

Unlike before, we use background-image to add multiple images to an element. Let’s look at this with code and renderings.

<div class="box"></div>/* The small image in the lower right corner is bg_flower.gif*/Copy the code

.box{ height: 500px; width: 800px; margin: 0 auto; margin-top: 100px; background-image: url(img/bg_flower.gif), url(img/2.jpg); */ background-position: right bottom, left top; /* Default to left top*/ background-repeat: no-repeat, repeat; /* Default is repeat*/}Copy the code

2.2 background-sizeResize the background image

Attribute values can be in real units or percentages.

.box{ background-size:60px 100px; /* width, height */ background-size:60% 100%; }Copy the code

2.3 background-originSpecifies the location area of the background image

background-origin: content-box / padding-box / border-box ; In the image below, the green is the border and the yellow is the padding+ Content area.

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    
Copy the code

    div{
        float:left;
        margin:30px;
        width: 120px;
        height: 150px;
        background: yellow;
        border: 20px solid green;
        padding: 20px;
        background-image: url(img/bg_flower.gif);
        background-repeat: no-repeat;
    }
    .box1{
        background-origin:content-box;
    }
    .box2{
        background-origin:padding-box;
    }
    .box3{
        background-origin:border-box;
    }
Copy the code

2.4 background-clipSpecifies the drawing area of the background

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

<div class="box1"> la la la la la, Demacia. La la la la, Kensei Stole the tower. La la la la la, I want to go home. La la la la la, not afraid of rain. Ah ha! </div> <div class="box2"> la la la la la, Demacia. La la la la, Kensei Stole the tower. La la la la la, I want to go home. La la la la la, not afraid of rain. Ah ha! </div> <div class="box3"> la la la la la, Demacia. La la la la, Kensei Stole the tower. La la la la la, I want to go home. La la la la la, not afraid of rain. Ah ha! </div>Copy the code

    div{
        float:left;
        margin:30px;
        width: 120px;
        height: 150px;
        background: yellow;
        border: 20px solid rgba(0, 0, 0, 0.1);
        padding: 20px;
    }
    .box1{
        background-clip:content-box;
    }
    .box2{

        background-clip:padding-box;
    }
    .box3{
        background-clip:border-box;
    }
Copy the code

2.5 linear-gradientBackground Gradient (IE10)

CSS3 gradients allow you to show smooth transitions between two or more specified colors. Previously, you had to use images to achieve these effects. However, by using GRADIents for CSS3, you can reduce the number of downloads and broadband usage. In addition, elements with gradients look better when zoomed in, because gradients are generated by the browser. Colors can be represented in a variety of ways, including rGBA () with transparency

Linear gradient

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
Copy the code

div{ float:left; margin:30px; width: 100px; height: 150px; border: 2px solid orange; font-size: 14px; The line - height: 1.5; }. Box1 {/* 1, attribute values at least two colors */ background: -webkit-linear-gradient(red, yellow); /* Safari 5.1-6.0 */ background: -o-linear-gradient(red, yellow); /* Opera 11.1-12.0 */ background: -moz-Linear-gradient (red, yellow); /* Firefox 3.6-15 */ background: Linear-gradient (red, yellow); }. Box2 {/* 2, you can set the direction of the color gradient, such as from left to right */ background: -webkit-linear-gradient(left, green, yellow); background: -o-linear-gradient(left, green, yellow); background: -moz-linear-gradient(left, green, yellow); background: linear-gradient(left, green , yellow); }. Box3 {/* 3, can also be along the diagonal gradient */ background: -webkit-linear-gradient(top left, blue, yellow); background: -o-linear-gradient(top left, blue, yellow); background: -moz-linear-gradient(top left, blue, yellow); background: linear-gradient(top left, blue , yellow); }.box4{/* 4, or we can use the Angle directly to determine the gradient direction (12 o 'clock is 0deg) */ background: -webkit-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); background: -o-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); background: -moz-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); background: linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); }.box5{/* 5, we can also define a variety of color gradient, the previous direction is the same */ background: -webkit-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet); background: -o-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet); background: -moz-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet); background: linear-gradient(45deg, red,orange,yellow,green,blue,indigo,violet); }. Box6 {/* 6, of course, gradient can be many times */ background: -webkit-repeating-Linear-gradient (Red, Red 10%, yellow 20%); background: -o-repeating-linear-gradient(red, red 10%, yellow 20%); background: -moz-repeating-linear-gradient(red, red 10%, yellow 20%); background: repeating-linear-gradient(red, red 10%, yellow 20%); }Copy the code

Radial gradient

To create a radial gradient, you must also define at least two color nodes. Color nodes are the colors that you want to make smooth transitions. You can also specify the center, shape (prototype or oval), and size of the gradient. By default, the center of the gradient is center, the shape of the gradient is ellipse, and the size of the gradient is apapse-corner.

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>

Copy the code

div{ float:left; margin:30px; width: 150px; height: 150px; border: 2px solid orange; font-size: 14px; The line - height: 1.5; }. Box1 {/* 1, color nodes evenly distributed (default */ background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */ background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */ background: radial-gradient(red, yellow, green); /* background-webkit-radial -gradient(red 5%, yellow 15%, green 60%); /* background-webkit-radial -gradient(red 5%, yellow 15%, green 60%); background: -o-radial-gradient(red 5%, yellow 15%, green 60%); background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); background: radial-gradient(red 5%, yellow 15%, green 60%); }.box3{/* 3, shape defines the shape. It can be the value circle or ellipse. Circle represents a circle and ellipse represents an ellipse. The default is Ellipse. */ background: -webkit-radial-gradient(circle, red, yellow, green); background: -o-radial-gradient(circle, red, yellow, green); background: -moz-radial-gradient(circle, red, yellow, green); background: radial-gradient(circle, red, yellow, green); }.box4{/* 4, size defines the size of the gradient. According to usPSARapapsis, according to usPSARapapsis, according to usPSARapapsis. -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); }. Box5 {/* 4, */ background: -webkit-repeating-radial-gradient(Red, yellow 10%, Green 15%); background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); background: repeating-radial-gradient(red, yellow 10%, green 15%); }Copy the code

Third, the text

3.1 text-shadowText shadow

The rules are similar to box-shadow. Text-shadow: x-offset, y-offset, shadow blur radius, color. Note here that if you write two of the first three values, such as text-shadow: 5px 5px # CCC; The shadow blur radius does not exist, there is still the shadow of the text, but there is no visual blur.

3.2 word-wrap | word-breakWhether to allow line breaks for long words, the two can be used together

Word – wrap: normal (only allow breakpoint word wrap) | break – word (if the word is too long, truncation forced a newline) word – break: Normal (the default browser line breaks rules, general long words is not allowed in the internal line | break – all (allowed within the word wrap) | keep -all (only line breaks at half Angle Spaces or hyphens);

    <div class="box1">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
    <div class="box2">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
    <div class="box3">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
    <div class="box4">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
Copy the code

div{ float:left; margin:30px; width: 100px; height: 150px; Border: 2px solid rgba(0, 0, 0, 0.5); font-size: 14px; The line - height: 1.5; } .box1{ word-wrap: normal; } .box2{ word-wrap: break-word; } .box3{ word-break: keep-all; } .box4{ word-break: break-all; }Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Summary of common CSS3 properties and effects

A, border

1.1 border-radiusRounded corners

1.2 box-shadowshadow

1.3 box-sizingProperties allow you to define a particular element that matches a particular region in a particular way. This is a bit of a catchy phrase, but let’s use diagrams to illustrate it.

Second, the background

2.1 background-image

2.2 background-sizeResize the background image

2.3 background-originSpecifies the location area of the background image

2.4 background-clipSpecifies the drawing area of the background

2.5 linear-gradientBackground Gradient (IE10)

Linear gradient

Radial gradient

Third, the text

3.1 text-shadowText shadow

3.2 word-wrap | word-breakWhether to allow line breaks for long words, the two can be used together

Summary of common CSS3 properties and effects

A, border

1.1 border-radiusRounded corners

1.2 box-shadowshadow

1.3 box-sizingProperties allow you to define a particular element that matches a particular region in a particular way. This is a bit of a catchy phrase, but let’s use diagrams to illustrate it.

Second, the background

2.1 background-image

2.2 background-sizeResize the background image

2.3 background-originSpecifies the location area of the background image

2.4 background-clipSpecifies the drawing area of the background

2.5 linear-gradientBackground Gradient (IE10)

Linear gradient

Radial gradient

Third, the text

3.1 text-shadowText shadow

3.2 word-wrap | word-breakWhether to allow line breaks for long words, the two can be used together

Related Posts

Mobile TERMINAL H5 multi-platform sharing

What is the difference between computed and Watch in Vue?

Ref and Reactive in VUe3