current position：Home>How can CSS set four fillets respectively?
How can CSS set four fillets respectively?
2022-01-26 22:54:12 【Terence Wang】
css How to set the border ？ Many times when developing the front end of the web page , In order to make the things on the web page look more comfortable , We may need to set some rounded borders, such as buttons , that , How do we set the rounded border ？ This article will introduce you to css How to set the rounded border .
css The most common and easiest way to set a rounded border is to use border-radius attribute .
CSS Only one property needs to be set for fillet ：border-radius（ The meaning is " Border radius "）. You provide a value for this property , You can set the radius of four fillets at the same time . All legal CSS Measures can be used ：em、ex、pt、px、 Percentage, etc .
border-radius It can be set at the same time 1 To 4 It's worth .
If you set 1 It's worth , Express 4 All rounded corners use this value .
css Rounded border code ：border-radius: 15px;
If you set two values , Indicates that the upper left corner and the lower right corner use the first It's worth , The upper right and lower left use the second value .
css Rounded border code ：border-radius: 15px 5px;
If you set three values , Indicates that the first value... Is used in the upper left corner , The upper right and lower left use the second value , Use the third value in the lower right corner .
css Rounded border code ：border-radius: 15px 5px 25px;
If you set four values , Then in turn Corresponding to the upper left corner 、 Upper right corner 、 The lower right corner 、 The lower left corner （ Clockwise order ）.
css Rounded border code ：border-radius: 15px 5px 25px 0px;
border-radius You can also set a second set of values with slashes . The first set of values represents the horizontal radius , The second set of values represents the vertical radius . The second set of values can also be set at the same time 1 To 4 It's worth , The application rule is the same as the first set of values .
Besides setting four fillets at the same time , You can also set each corner separately . Corresponding to four corners ,CSS3 Four separate properties are provided ：
|border-radius||Use this element to set four boundary radius attributes|
|border-top-left-radius||Use this element to set the upper left radius attribute|
|border-top-right-radius||Use this element to set the upper right radius attribute|
|border-bottom-left-radius||Use this element to set the lower left radius attribute|
|border-bottom-right-radius||Use this element to set the lower right radius attribute|
All four properties can be set at the same time 1 To 2 It's worth . If you set 1 It's worth , It means that the horizontal radius is equal to the vertical radius . If you set 2 It's worth , The first value is the horizontal radius , The second value represents the vertical radius .
author[Terence Wang],Please bring the original link to reprint, thank you.
The sidebar is recommended
- Spring IOC container loading process
- [thinking] the difference between singleton mode and static method - object-oriented programming
- Hadoop environment setup (MySQL environment configuration)
- 10 minutes, using node JS creates a real-time early warning system for bad weather!
- Git tool
- Force deduction algorithm - 92 Reverse linked list II
- What is the sub problem of dynamic programming?
- C / C + +: static keyword summary
- Idea does not have the artifacts option when configuring Tomcat
- Anaconda can't open it
guess what you like
I don't know how to start this
Matlab simulation of transportation optimization algorithm based on PSO
MySQL slow log optimization
[Vue] as the window is stretched (larger, smaller, wider and higher), the text will not be displayed
Popular Linux distributions for embedded computing
Suzhou computer research
After installing SSL Certificate in Windows + tomcat, the domain name request is not successful. Please answer!!
Implementation time output and greetings of jQuery instance
The 72 year old uncle became popular. Wu Jing and Guo fan made his story into a film, which made countless dreamers blush
How to save computer research
- Springboot implements excel import and export, which is easy to use, and poi can be thrown away
- The final examination subjects of a class are mathematical programming, and the scores are sorted and output from high to low
- Two pronged approach, Tsinghua Professor Pro code JDK and hotspot source code notes, one-time learning to understand
- C + + recursive knapsack problem
- The use of GIT and GitHub and the latest git tutorial are easy to understand -- Video notes of crazy God speaking
- PostgreSQL statement query
- Ignition database test
- Context didn't understand why he got a high salary?, Nginxfair principle
- Bootstrap switch switch control user's guide, springcloud actual combat video
- A list that contains only strings. What other search methods can be used except sequential search
- [matlab path planning] multi ant colony algorithm grid map path planning [including GUI source code 650]
- [matlab path planning] improved genetic algorithm grid map path planning [including source code phase 525]
- Iinternet network path management system
- Appium settings app is not running after 5000ms
- Reactnative foundation - 07 (background image, status bar, statusbar)
- Reactnative foundation - 04 (custom rpx)
- If you want an embedded database (H2, hsql or Derby), please put it on the classpath
- When using stm32g070 Hal library, if you want to write to flash, you must perform an erase. If you don't let it, you can't write continuously.
- Linux checks where the software is installed and what files are installed
- SQL statement fuzzy query and time interval filtering
- 69. Sqrt (x) (c + + problem solving version with vs runnable source program)
- Fresh students are about to graduate. Do you choose Java development or big data?
- Java project: OA management system (java + SSM + bootstrap + MySQL + JSP)
- Titanic passenger survival prediction
- Vectorization of deep learning formula
- Configuration and use of private image warehouse of microservice architect docker
- For someone, delete return 1 and return 0
- How does Java dynamically obtain what type of data is passed? It is used to judge whether the data is the same, dynamic data type
- How does the database cow optimize SQL?
- [data structure] chain structure of binary tree (pre order traversal) (middle order traversal) (post order traversal) (sequence traversal)
- Webpack packaging optimization solution
- 5. Operation element
- Detailed explanation of red and black trees
- redhat7. 9 install database 19C
- Blue Bridge Cup notes: (the given elements are not repeated) complete arrangement (arrangement cannot be repeated, arrangement can be repeated)
- Detailed explanation of springboot default package scanning mechanism and @ componentscan specified scanning path
- How to solve the run-time exception of test times
- Detailed explanation of k8s management tool kubectl
- Android system view memory command