1.为元素添加四个相同的圆角:
语法结构:border-radius:r;
r为圆角的半径大小
eg:如下样式,给元素添加四个圆角为10px
代码如下:
<!doctype html><html> <head> <meta chart="utf-8"> <title>radius</title> <style> div{ widt酸雨是怎样形成的h: 100px; height: 100px; background-color: aqua; border-radius: 10px; } </style> </head> <body> <div></div> </body></html>
2.为元素创建一个圆角
语法结构:
左上角: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 chart="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.为元素创建一个椭圆角
语法结构:
左上角: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 chart="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.圆形设置:
方法1: 条件1:定义width等于height 条件2:radius=1/2width 代码如下:
<!doctype html><html> <head> <meta chart="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%(永远为容器的一半)
代码如下:
<!doctype html><html> <head> <meta chart="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.半圆设置:
语法结构:
border-radiu上海应用s:r1 r2 0 0;
其中r1和r2是左右上角的半径大小,左下角和右小角设置为0
设定条件:r1=r2=1/2width=height
eg:设定一个直径为100px的半圆
代码如下:
<!doctype html><html> <head> <meta chart="utf-8"> <title>radius</title> <style> 儿童大脑开发div{ width: 100px; dr dennis gross height: 50px; background-color: aqua; border-radius: 50px 50px 0 0; } </style> </head> <body> <div></div> </body></html>
6.椭圆形设置:
语法结构:
border-radius:x/y;
其中x表示圆角在水平方向上的半径大小,y表示圆角在垂直方向上的半径大小
eg:设置一个与容器为w:200px,h:100px内相切的一个椭圆形
代码如下:
<!doctype html><html> <head> <meta chart="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赋多个值的含义:
(1) border-radius:r1 r2;
其中r1是左上角和右下角的半径大小,r2是左下角和右上角的半径大小
eg:如下样式,左上角和右下角的半径为10px,左下角和右上角的半径为30px
代码如下:
<!doctype html><html> <head> <meta chart="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 chart="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>
本文发布于:2023-04-07 09:58:32,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/1ac759fba269e3ada143b4647731b952.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:css—>圆角设置.doc
本文 PDF 下载地址:css—>圆角设置.pdf
留言与评论(共有 0 条评论) |