Summary of how to use css3 rounded corners and rounded borders

Before the advent of CSS3, the effect of rounded corners could be achieved through pictures or margin attributes. The traditional rounded corner generation scheme required multiple pictures as background patterns. After the emergence of CSS3, there is no need to waste time creating multiple images, which greatly reduces the workload, improves the performance of web pages, improves page loading speed, and increases visual reliability. Now that we have said that rounded corners in CSS3 have so many advantages, let’s summarize how to use CSS3 rounded corners and rounded borders.

#You can first learn "Quick CSS3 Rounded Corners Introduction Chapter Course

Knowledge related to the use of CSS3 rounded corners and rounded borders

1.

css3 fillet introduction and application skillsAdaptive ellipse and fillet construction,

To construct a circle on css, you only need to add border- The radius attribute value can be set to half the side length. Here we give a comprehensive introduction to the properties of border-radius. Border-radius is an abbreviated property. Its expansion formula is border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border- bottom-left-radius. It also has a little-known feature: border-radius can specify the horizontal and vertical radii separately, as long as the two values ​​​​are separated by a slash ( / ) (the horizontal and vertical radii of rounded corners are equal and can be combined) . Combining these characteristics, the detailed expansion of border-radius:50%; should be border-radius:50% 50% 50% 50%/50% 50% 50% 50%.

2. CSS3 rounded border and border image effect example sharingThe learning points are as follows:Rounded corner border-radius;

Box shadow box-shadow;Border image border-image. The border-radius property allows you to add rounded borders to your elements! The border-image property is used to set the border of the image. 3. Share an example code of CSS3 rounded corners and gradient function

Linear gradient: background: linear-gradient (set gradient form, first starting point of a color, the position of the middle color point, the end point color); Linear: type of gradient (linear gradient); form of gradient: optional parameters in two ways - 1. Set the rotation angle, 0 degrees represents the horizontal angle from From left to right, 90 degrees means from top to bottom, starting from 0 degrees and changing counterclockwise.

4.

Use of CSS3 rounded borders-Escape Tornado

border-radius detailed explanation

border-radius:50px;

上Bottom right, left, horizontal and vertical distance are 50px

border-radius:50%; The % sign here is the base length and width of the applied CSS style element

border-radius:50% 30%; Up and down, horizontal and vertical is about 50%, horizontal and vertical is 30%

border-radius:50% 30% 10%; Up, horizontal and vertical is 50%, left and right, horizontal Vertical is 30%, bottom, horizontal and vertical is 10%

border-radius:10% 50% 30% 10%; Up, horizontal and vertical are both 10%. Right, horizontal and vertical are both 50%. Down, horizontally and vertically are 30%. Left, horizontal and vertical are both 10% /The front is horizontal,/the back is vertical

border-radius:50% / 30%; Up, left, bottom, right , horizontal is 50%, vertical is 30%

border-radius:50% / 30% 10%; Left and right vertical 10%;

5.

CSS3 rounded corners, shadow, transparent

There are two ways to achieve rounded corners in CSS3.

The first is the background image. Traditional CSS can only have one background image for each element, but CSS3 can allow one element to have multiple background images. In this way, four 1/4 circle background images are added to an element, located at 4 You can achieve rounded corners on a single corner.

The second method is simple and can be implemented directly with CSS without using pictures.

6.

css3 rounded border production Method

Firefox and Safari use private properties to achieve the rounded corner effect; This represents the color of the bottom image in the border; border: 1px solid #000; represents the width of the border, solid, and the color is black; border-top-left-radius: 55px 25px; indicates the border rounded effect in the upper left corner, which can be identified in English: top, left. The length of the modified rounded corners is achieved by controlling the pixel value. 55px indicates the horizontal length, and 25px indicates Vertical length; Similarly, border-bottom-right-radius: 55px 25px; for the rounded corner effect in the lower right corner, just change top to bottom; use css3 to achieve the border rounded corner effect.

Related Questions and Answers

1.

css3 rounded border-radius creates sharp corners.

2.

WeChat browser css3 rounded corners problem

3.

css3 rounded rectangle problem

【 Related recommendations]

1. PHP Chinese website free video tutorial:

CSS3 latest video tutorial

2. PHP Chinese website free tutorial:

CSS3 latest basic tutorial detailed explanation

The above is the detailed content of Summary of how to use css3 rounded corners and rounded borders. For more information, please follow other related articles on the PHP Chinese website!