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 borders1.
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
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: 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!