CSS3 Border-radius Border Rounded corners

CSS3 Border-radius Border rounded corners http://www.cnblogs.com/polk6/p/6050818.html

Support for fillet setting of borders is provided in CSS3, which allows you to set the fillet style for 1~4 corners of a border.

Directory

1. Introduction

2. Format and type of value values

3. Border-radius 1~4 Description of parameters

4. Online example

1. Introduction 1.1 Fillet Properties

The CSS3 provides 5 fillet properties:

Border-radius: Sets the fillet style for 4 borders at the same time.

Border-top-left-radius: Sets the fillet style of the upper-left border.

Border-top-right-radius: Sets the rounded style of the top-right border.

Border-bottom-left-radius: Sets the rounded style of the bottom-left border.

Border-bottom-right-radius: Sets the rounded style of the bottom-right border.

Example :

1.2 Browser support conditions

Minimum version support : IE 9, Chrome 4

1.3 reference materials

specification : https://www.w3.org/TR/css3-background/#the-border-radius

Document : Https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

2. Format and type of value values

The value of the Border-*-radius property sets the horizontal and vertical radii, respectively, and the vertical radius defaults to the horizontal radius value if the vertical radius is omitted.

For each value, the supported units have fixed lengths and percentages . If you set the percent format, the percentage of the horizontal radius refers to the width of the border, and the percentage of the vertical radius is the height of the bounding rectangle.

The combinations are as follows (take Border-radius as an example):

1) border-radius:20px; Indicates that the horizontal and vertical radii of the fillet are 20px in length.

2) border-radius:20px/40px; The length of the horizontal radius representing the fillet is 20px and the vertical radius is 20px.

3) border-radius:20%; Indicates that the horizontal and vertical radii of the fillet are 20% of the respective border length.

4) border-radius:20%/30%; The horizontal radius of the fillet is the 20% of the border width, and the vertical radius is 20% of the border height.

5) border-radius:20px/30%; The horizontal radius length of the fillet is 20px, and the vertical radius is 20% of the border height.

Example :

3. Border-radius 1~4 Description of parameters

Border-radius can set the same value for Four corners at once, or you can set a fillet style for 4 corners.

The secret is to set the number of Border-radius parameters.

First look at the parameters of the CSS specification for Border-radius:[<length> | <percentage>]{1,4} [/[<length> | <percentage>] {1,4}]?

Can be learned that the Border-radius parameter range of 1~4, here to note the point of the horizontal radius and vertical radius of the use of the separate: in the Border-radius set the horizontal radius of 4 corners and then set the vertical radius of 4 corners.

The following separately describes the meaning of the parameter 1~4:

3.1 Number of parameters: 1

Description : This setting is used for the rounded style of the 4 borders.

example : border-radius:20px; 4 border fillet styles are 20px

3.2 Number of parameters: 2

Description :

The ① parameter: the rounded style of the upper-left and bottom-right borders.

The ② parameter: the rounded style of the upper-right and bottom-left borders.

example : border-radius:20px 40px; Upper-left and lower-right corner: 20px, Upper-right corner and lower-left corner: 40px

3.3 Number of parameters: 3

Description :

The ① parameter: the rounded style of the top-left border.

The ② parameter: the rounded style of the upper-right and bottom-left borders.

The ③ parameter: the rounded style of the bottom-right border.

example : border-radius:20px 40px 60px; Upper left corner: 20px, upper right and lower left: 40px, lower right: 60px

3.4 Number of parameters: 4

Description :

The ① parameter: the rounded style of the top-left border.

The ② parameter: the rounded style of the top-right border.

The ③ parameter: the rounded style of the bottom-right border.

The ④ parameter: the rounded style of the bottom-left border.

example : border-radius:20px 40px 60px 80px; Upper left corner: 20px; upper right corner: 40px; lower right corner: 60px; lower left corner: 80px

4. Online Example 4.1 example

4.2 Online Address

Address: http://www.akmsg.com/WebDemo/CSS3-border-radius.html

================================== Series Article ==========================================

This article: 8.1 CSS3 Border-radius Border Fillet

Web Development Road Series articles

Web Development Road Series articles

1.HTML

1.1 HTML page source code layout Introduction

1.2 HTML Base Control Introduction

The difference between 1.3 iframe and frameset

1.4 The difference between name, ID, class

1.5 table, form label introduction, and get and post submission methods

1.6 HTML KBD Keyboard elements

2.CSS Cascading Style Sheets

2.1 CSS selectors and how to refer to each style

2.2 CSS HTML element layout and Display Properties

2.3 CSS Float Float Property

2.4 CSS Position Positioning properties

3.JavaScript Introduction

3.1 JavaScript var keyword, the state of the variable, exception handling, naming specification and other introduction

3.2 JavaScript function functions type

3.3 JavaScript Array Object

3.4 JavaScript Date Object

3.5 JavaScript Math and number objects

3.6 JavaScript String Object

3.7 JavaScript Object Objects

3.8 JavaScript Custom Objects

3.9 JavaScript Object Properties Introduction

3.10 JavaScript Development Specification

4.BOM

4.1 HTML BOM Browser Object

4.2 HTML Gets the height width of the screen, browser, page

4.3 HTML URL Address Resolution

5.DOM

5.1 HTML DOM Introduction

5.2 HTML DOM Object

5.3 An introduction to the HTML event (i) event

5.4 HTML Event (ii) registration and logoff of events

5.5 HTML Event (iii) event flow and event delegation

5.6 HTML Event (quad) analog event operation

6.html5

6.1 HTML5 Introduction

6.2 HTML5 Semantic Element (i) page structure

6.3 HTML5 semantic Element (ii) text content

6.4 HTML5 INPUT Element new features

6.5 HTML5 Progress and meter controls

6.6 HTML5 Sessionstorage Session Store

6.7 HTML5 Localstorage Local Storage

7.ExtJS 4.2

7.1 ExtJS 4.2 Introduction

7.2 ExtJS 4.2 First Program

7.3 ExtJS 4.2 Components Introduction

How to find 7.4 ExtJS 4.2 components

7.5 ExtJS 4.2 Business Development (i) Homepage construction

7.6 ExtJS 4.2 Business Development (ii) data presentation and enquiry

7.7 ExtJS 4.2 Business Development (iii) data additions and modifications

7.8 ExtJS 4.2 Grid component cell merging

7.9 ExtJS 4.2 Date Component extension: Add Clear button

7.10 ExtJS 4.2 Rating components

8.CSS 3

8.1 CSS3 Border-radius Border rounded corners

It's just a record of what I learned and encountered when I was learning and using Web front-end content.

Reference documents:

1) http://www.w3school.com.cn/

2) "JavaScript authoritative Guide (sixth edition)"

Transfer from http://www.cnblogs.com/polk6/archive/2016/11/14/6050818.html

CSS3 Border-radius Border Rounded corners