Css3 helps you easily achieve the rounded corner effect, with different front-end pages ., Css3 rounded corner

Css3 helps you easily achieve the rounded corner effect, with different front-end pages ., Css3 rounded corner
Achieve the rounded corner effect on the Web Front-end page. CSS3 helps you easily implement a personalized attribute.

Creating a border with rounded corners is one of the most common ways to beautify the page effects on Web pages and Web applications. Today, I will introduce an attribute provided by CSS3 that can change a rectangle into a rounded rectangle.

Technical Level: Intermediate | suitable for those who have a certain level of CSS knowledge.

If you wish to add this article to your favorites, you can also take a look at me, because these articles are serialized and systematically summarized. If you read it carefully, you will surely learn useful knowledge for you.

The CSS3 attribute involved in this section is:

• Border-radius

I. Value of the rounded corner attribute:

Web Front-end/html5 Learning Group: 250777811

Welcome to follow this public account → [web Front-end EDU] and learn the front-end together! You are welcome to leave a message to discuss and forward it together.

CSS3 uses the border-radius attribute to set the rounded Corner Effect

This attribute can be achieved by setting the number of vertices in the radius of the four corners of an image or block-level element. W3C specifies the possible value of this attribute as follows:

• None, default value, indicating that the element has no rounded Corner Effect

• Length, a length value consisting of floating-point numbers and unit identifiers

• %, Rounded corner value set by percentage

This attribute can be used to set the four rounded corners of an element in the following format.

Format: border-radius: bottom right corner of the upper left corner;

Generally, the radius of the angle in the four directions is implemented using the length value, which must be composed of floating point numbers and unit identifiers. This value cannot be a negative number.

Example 1:Use an integer to obtain the rounded corner.
Div {
Width: 200px; height: 150px;
Border: solid 1px # aaaaaa;
Border-radius: 10px 5px 10px 5px;
Background-color: # ff5857;
}

The preceding example sets a div block-level element with a width of 200px and a height of 150px. To see the effect of the rounded corner, the background color # ff5857 is added, and a 1 px border is added. The border is solid, and the border color is # aaaaaa. Finally, set the rounded corner effect. The upper left corner and lower right corner are both 10px, and the upper right corner and lower left corner are both 5px.

The following figure shows the 10 pixels in the upper left corner. The rounded corner of an angle consists of two parts: "Horizontal Corner radius" and "vertical Corner radius ". The value of an angle is a data, indicating that the "horizontal angle radius" and "vertical right corner radius" are equal.

The horizontal angle radius is equal to the vertical angle radius.

It seems that the value of the border-radius attribute should be four values, indicating the rounded margin in four directions. What should I do if the number of values for this attribute is less than four?

Example 2:View the following CSS code.
(1) border-radius: 10px 5px 15px 20px;
(2) border-radius: 10px 5px 15px;
(3) border-radius: 10px 5px;
(4) border-radius: 10px;

In the above four groups of code, only group (1) provides four data in full format, and the other three groups only provide less than four data. In this case, the data is still arranged in the order of "bottom right corner in the upper left corner,The corner data that is not involved is set according to the rounded corner data on the diagonal corner..

Therefore, the data in group (2) is 10 Px in the upper left corner, 5 Px in the upper right corner, 15 pixels in the lower right corner, and 5 Px in the upper right corner in the lower left corner. Please follow these steps to understand the meaning of the rounded corner of group (3.

Group (4) sets a data, which indicates that the radius of the four directions is 10px.

2. Set the four rounded corners of an element independently:

If you only want to set the rounded corner effect in the upper right corner of a block-level element, how can this problem be achieved? Here, W3C derives the sub-attribute that represents the effect of an independent rounded corner in four directions for the border-radius attribute.

• Border-top-left-radius: defines the rounded corner effect in the upper left corner.

• Border-top-right-radius: defines the rounded corner effect in the upper right corner.

• Border-bottom-right-radius: defines the rounded corner effect in the lower right corner.

• Border-bottom-left-radius: defines the rounded corner effect in the lower left corner.

The value rules of the preceding four sub-attributes are identical with those of the border-radius attribute.

Example 3:Set the rounded corner effect marked with p, with no rounded corner effect in the lower left corner and 25px for the other three.
Method 1:Use the border-radius attribute for unified settings.
P {border-radius: 25px 25px 25px 0 ;}
Method 2:Use the border-radius attribute to set the dispatch attributes.
P {
Border-top-left-radius: 25px;
Border-top-right-radius: 25px;
Border-bottom-right-radius: 25px;
}
Method 3:Use the border-radius attribute to set the direction of all corners to 25px, and then use the dispatch attribute of the border-radius attribute to set the lower left corner without Corner Effect.
P {
Border-radius: 25px;
Border-bottom-left-radius: none;
}

3. Set the rounded corner effects with different horizontal and vertical radius

W3C also provides a way to set the effect of different Corner radius. Here, we take the upper left corner as an example to show how to set different Corner radius.

Format: border-top-left-radius: horizontal angle radius/vertical angle radius;

In the preceding format, the Corner radius in two directions is separated by a slash.

Example 4:Set the rounded corner of the upper left corner of the div block-level element to 50 Px in the horizontal Corner radius and 25 Px in the vertical Corner radius.
Div {border-top-left-radius: 50px/25px ;}

The horizontal angle radius is not equal to the vertical angle radius.

Example 5:Set the div block level element to a positive circle with a radius of PX.

div{
width: 200px; height: 200px;
background-color: #ff5857;
border: solid 1px #aaaaaa;
border-radius: 100px;
}

In the code above, set the radius of the rounded corner of the block-level element to half the width or height, so that a positive circle with a radius of half the width or height can be obtained.

Example 6:Set the div block level element to an elliptical shape with a long half axis of 100px and a short half axis of 75px.
Div {
Width: 200px; height: 150px;
Background-color: # ff5857;
Border: solid 1px # aaaaaa;
Border-radius: 100px/75px;
}

In the preceding Code, set the horizontal radius of a block-level element to half the width and the vertical right radius to half the height. Because the width and height of the block-level element are different, an elliptical shape can be obtained.

4. Use percentage to achieve the rounded corner effect:

W3C stipulates that the percentage can also be used to achieve the rounded Corner Effect of block-level elements. Here, the percentage value is based on the width or height of the block-level element. The size of the horizontal radius is based on the width value of the block-level element, and the size of the vertical right corner is based on the height value of the block-level element.

Example 7:View the following CSS code.
Div {
Width: 200px; height: 200px;
Border-radius: 20%;
}

In the above Code, in the rounded corner of the div tag, the horizontal Corner radius is 20% of the width, that is, 200px * 20% = 40px. The right-angle radius is 20% of the height, which is also 40px.

Example 8:View the following code.
Div {
Width: 200px; height: 100px;
Border-radius: 20%;
}

 

In the above Code, in the rounded corner of the div tag, the horizontal Corner radius is 20% of the width, that is, 200px * 20% = 40px. The right-angle radius is 20% of the height, that is, 100px * 20% = 20px.

That is to say, as long as the value of border-radius is 50%, a positive circle is obtained when the width and height are the same. When the width and height are different, an elliptical shape is obtained.

 

Web Front-end/html5 Learning Group: 250777811

Welcome to follow this public account → [web Front-end EDU] and learn the front-end together! You are welcome to leave a message to discuss and forward it together.

 I want to see it again. point your finger at me!