This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

opacity

Opacity allows an element to be transparent or semi-transparent. The value ranges from 0 to 1. Opcacity defaults to 1.

Opacity calculation rule

When opacity is set for both parent and child elements, the opacity effect is superimposed because opacity is non-inheritable. For example, if opacity is set to opacity: 0.4 for both parent and child elements, the opacity is 0.16, which is the product of the two opacity elements.

Animation-father {opacity: 0.4} // Animation-son {opacity: 0.4} // Animation-son {opacity: 0.4}Copy the code

The boundary of the opacity

Since the range of opacity is 0-1, if the value set is not within this range, the system will display it according to the boundary value.

.wrapper{// Set the transparency value to -11, but the system will parse to0
    opacity: -11; // Set transparency to88, the system will parse into1
    opacity:88
}
Copy the code

RGBA and HSLA both have the feature of opacity boundary value.

border-radius

In our daily work, we most often use pixels and percentages to set border-radius.

border-radius: 10px; // Set a circleborder-radius: 50%;
Copy the code

Border-radius is an abbreviated form, and its full form is made up of four parts: Border-top-left -radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

When there is only one value, the effect of this value will apply to four corners: border-radius: 5px

When there are two values, the first value applies to the upper left and lower right corner, and the second value applies to the upper right and lower left corner: border-radius: 6px 10%

When there are three values, the first value applies to the top left corner, the second value applies to the bottom right and left corner, and the third value applies to the bottom right corner: border-radius: 3px 5%6px

When there are four values, the first value applies to the upper left corner, the second value applies to the upper right corner, the third value applies to the lower right corner, and the fourth value applies to the lower left corner: border-radius: 6px 7% 8px 4px

There are some equivalent abbreviations:

border-top-left-radius: 5px; / / equivalent to theborder-radius: 5px 5px;
Copy the code

The area outside the rounded corner of the border-radius cannot respond to click events. Negative values are not supported. When we set border-radius to the parent element and the child element to a right-angle effect, we can set Overflow: Hidden to visually make the child element look like a rounded corner. When we apply border-radius to display:table or display: For inline-table, we must make the border-collapse property of the table element separate. Border-collapse defaults to separate. Border-collapse: collapse will not show rounded edges.

We can also use border-radius to set some irregular rounded corners:

.wrapper {
    border-radius: 69% 29% 29% 69% / 59% 39% 59% 39%;
}
Copy the code

General graphic effects with arcs can be achieved by using border-radius. We can draw corner markers:

border-bottom-right-radius: 100%;
Copy the code