|
1.為元素添加四個(gè)相同的圓角： 語法結(jié)構(gòu)：border-radius：r； r為圓角的半徑大小 eg:如下樣式，給元素添加四個(gè)圓角為10px 代碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width: 100px; height: 100px; background-color: aqua; border-radius: 10px; } </style> </head> <body> <div></div> </body> </html> 2.為元素創(chuàng)建一個(gè)圓角 語法結(jié)構(gòu)： 左上角：border-top-left-radius: r ； 右上角：border-top-right-radius: r ； 左下角：border-bottom-left-radius: r ； 右下角：border-bottom-right-radius: r ；
eg:如下樣式，給元素添加左上角圓角為30px
代碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width: 100px; height: 100px; background-color: aqua; border-top-left-radius: 30px; } </style> </head> <body> <div></div> </body> </html> 3.為元素創(chuàng)建一個(gè)橢圓角 語法結(jié)構(gòu)： 左上角：border-top-left-radius: x y ； 右上角：border-top-right-radius:x y ； 左下角：border-bottom-left-radius: x y ； 右下角：border-bottom-right-radius: x y ； 其中x表示圓角在水平方向上的半徑大小，y表示圓角在垂直方向上的半徑大小
eg:如下樣式，給元素添加左上角圓角在水平方向上為10px，在垂直方向上為30px 代碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width: 100px; height: 100px; background-color: aqua; border-top-left-radius: 10px 30px; } </style> </head> <body> <div></div> </body> </html> 4.圓形設(shè)置：  方法1：
條件1：定義width等于height
條件2：radius=1/2width
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width: 100px; height: 100px; background-color: aqua; border-radius: 50px; } </style> </head> <body> <div></div> </body> </html> 方法2： 定義:radius:50%(永遠(yuǎn)為容器的一半) 代碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width: 100px; height: 100px; background-color: aqua; border-radius: 50%; } </style> </head> <body> <div></div> </body> </html>
5.半圓設(shè)置： 語法結(jié)構(gòu)： border-radius:r1 r2 0 0; 其中r1和r2是左右上角的半徑大小，左下角和右小角設(shè)置為0 設(shè)定條件:r1=r2=1/2width=height eg:設(shè)定一個(gè)直徑為100px的半圓 代碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width: 100px; height: 50px; background-color: aqua; border-radius: 50px 50px 0 0; } </style> </head> <body> <div></div> </body> </html> 6.橢圓形設(shè)置： 語法結(jié)構(gòu)： border-radius:x/y; 其中x表示圓角在水平方向上的半徑大小，y表示圓角在垂直方向上的半徑大小 eg:設(shè)置一個(gè)與容器為W:200px,H:100px內(nèi)相切的一個(gè)橢圓形 代碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width: 200px; height: 100px; background-color: aqua; border-radius: 100px/50px; } </style> </head> <body> <div></div> </body> </html> 7.給radius賦多個(gè)值的含義： (1) border-radius：r1 r2; 其中r1是左上角和右下角的半徑大小，r2是左下角和右上角的半徑大小 eg:如下樣式，左上角和右下角的半徑為10px,左下角和右上角的半徑為30px 代碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width: 100px; height: 100px; background-color: aqua; border-radius: 10px 30px; } </style> </head> <body> <div></div> </body> </html> (2) border-radius：r1 r2 r3 r4; 其中r1是左上角半徑大小,r2是右上角半徑大小，r3是右下角半徑大小,r4是左下角半徑大小 eg:如下樣式，左上角半徑大小10px,右上角半徑大小20px，右下角半徑大小30px,左下角半徑大小40px 代碼如下； <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width: 100px; height: 100px; background-color: aqua; border-radius: 10px 20px 30px 40px; } </style> </head> <body> <div></div> </body> </html> |
|
|
