• Trust this property, as those of you who have written CSS know, to create rounded corners, such as drawing a circle:

  div {
      width:100px;
      height:100px;
      background:red;
      border-radius:100px;    //border-radius:100%;
      }Copy the code

  

• Then let’s look at the syntax: border-radius: [top left] [top right] [bottom right] [bottom left], so let’s draw a semicircle

  div {
      width: 100px;
      height: 50px;
      background: red;
      border-radius: 50px 50px 0 0;
      }Copy the code

  

• So what if I wanted to draw an ellipse? Border-radius = x radius /y radius; border-radius = x radius /y radius

  div {
      width: 100px;
      height: 50px;
      background: red;
      border-radius: 50px/25px;
      }Copy the code

  

• What if I wanted to draw half an ellipse?

  div {
      width: 100px;
      height: 50px;
      background: red;
      border-radius: 100% 0 0 100% /50%;
      }Copy the code

  

::after

To take a simple example, we will draw a magnifying glass, as shown below:

For analysis, the magnifying glass can be made up of two divs, one with a black circle and one with a black handle (rotated 45 degrees). So we just need two divs? The answer is NO, a div is ok, we can add an element with ::after. Similarly, if we need three divs, we can add another element using ::before. Here’s the code:

div {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid #333;
    position: relative;
    }
div::after {
    content: '';
    display: block;    
    width: 8px;    
    height: 60px;    
    border-radius: 5px;    
    background: #333;    
    position: absolute;    
    right: -22px;    
    top: 38px;    
    transform: rotate(-45deg);
    }Copy the code

The content and attr

For example, we want to implement a levitating prompt function. The traditional way is to use the title property, but now we can use cSS3’s attR: the ability to get the value of an element’s property in CSS and insert it into the content of the pseudo-element.

Suppose our HTML code looks like this:

<div data-title="hello, world">hello... </div>Copy the code

Let’s look at the CSS code that implements this plugin:

div { position: relative; } div:hover::after { content: attr(data-title); Display: inline-block; display: inline-block; padding: 10px 14px; border: 1px solid #ddd; border-radius: 5px; position: absolute; top: -50px; left: -30px; }Copy the code

To hover, add an element with the value of the data-title attribute to the end of the element, so the hover effect is achieved, as shown below:

box-sizing

We know that in the standard box model, the total width of the element = content + padding + border + margin. Box-sizing (content-box) (default) box-sizing (border-box) (default) (border-box) (padding-box) (default

Generally speaking, if we need to have a div that is 200px wide, padding10px wide, and border5px wide, this is how we define the style after calculation.

div {
    width: 170px;   // Use 200-10*2-5*2 = 170 to get the width.
    height: 50px;
    padding: 10px;
    border: 5px solid red;
    }Copy the code

Then let’s use the box-sizing property.

div {
    box-sizing: border-box;
    width: 200px;  // The width of the element is the total width of the element
    height: 50px;
    padding: 10px;
    border: 5px solid red;
    }Copy the code

linear-gradient

When working on active pages, we often encounter the following requirement:

A large banner image in the middle of the top, and then the background color of the entire area should be changed according to the background color of the image. You can use this property.

div {
    width: 200px;
    height: 50px;
    background: linear-gradient(to right, red, yellow, black, green);
    }Copy the code

Isn’t that interesting? Linear-gradient has more interesting features, which you can check out in the GIF below:

You think this is the end? Wait, there are more powerful! Repeating-linear-gradient, get a feel for it:

Linear-gradient has even more powerful features, such as the ability to add multiple gradients to an element to achieve a more elegant effect.

radial-gradient

Linear-gradient above is a linear gradient, and this property is a radial gradient. The following code implements a Chrome logo.

div.chrome {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #999, 0 0 2px #ddd inset;
    background: radial-gradient(circle, #4FACF5 0, #2196F3 28%, transparent 28%),
                radial-gradient(circle, #fff 33%, transparent 33%),
                linear-gradient(-50deg, #FFEB3B 34%, transparent 34%),
                linear-gradient(60deg, #4CAF50 33%, transparent 33%),
                linear-gradient(180deg, #FF756B 0, #F44336 30%, transparent 30%),
                linear-gradient(-120deg, #FFEB3B 40%, transparent 40%),
                linear-gradient(-60deg, #FFEB3B 30%, transparent 30%),
                linear-gradient(0deg, #4CAF50 45%, transparent 45%),
                linear-gradient(60deg, #4CAF50 30%, transparent 30%),
                linear-gradient(120deg, #F44336 50%, transparent 50%),
                linear-gradient(180deg, #F44336 30%, transparent 30%);
                }Copy the code

The realization principle is to use multiple gradients on div, friends are covered, visually produced the desired effect, is not very powerful! If you look at the image below, you can see that you have added a lot of gradients to div.

box-shadow

While most of the examples above are about understanding and understanding the new properties of CSS3, this example is about the solution.

• Requirement: We want to implement the following effect (three borders: black, green, and red) :

  

• Solution 1: Without cSS3 knowledge, we can do this: take three divs, set the border separately, and then control the width, height and position respectively to achieve this effect. Obviously, it’s complicated, so I’m not going to post the code here.

• Solution 2: Now that we know about CSS3, we can easily solve this problem with box-shadow. Box-shadow: [x offset] [y offset] [shadow blur width] [shadow width] [color]. You can also add multiple shadows, separated by commas.

  

  Of course you can add more, quadruple bezels, quintuple bezels… It’s not a problem anymore. In addition, you can add rounded corners, and the shadows will stick to the inner div.

  One disadvantage of this approach is that dashed borders are not supported.

• Solution 3: Use outline (supports only double borders)

  

  The disadvantage of using this approach is that only two levels of borders are supported, and it does not automatically fit according to the border-radius of the container.

conclusion

Through the in-depth understanding of CSS3 during this period of time, I found that CSS3 is really powerful and interesting to study, but I can’t think of it and FEEL that I can’t do it. However, it is up to us to decide what technology to use when we may need to write a lot of CSS code to achieve cool results.