CSS3边框 圆角效果 border-radius
2024-10-07 07:50:03
border-radius是向元素添加圆角边框
使用方法:
border-radius:10px; /* 所有角都使用半径为10px的圆角 */
border-radius: 5px 5px 5px 5px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。
实心上半圆:
方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。
div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}
实心圆:
方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。如下代码:
div{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;
}
实心下半圆:
方法:把高度(height)设为宽度(width)的一半,并且只设置左下角和右下角的半径与元素的高度一致(大于也是可以的)。
div.circle2{
height:50px;
width:100px;
background:#9da;
border-radius:0 0 50px 50px;
}
实心左半圆:
方法:把宽度(width)设为高度(height)的一半,并且只设置左上角和左下角的半径与元素的高度一致(大于也是可以的)。
div.circle2{
height:50px;
width:100px;
background:#9da;
border-radius:50px 0 0 50px;
}
实例右半圆:
方法:把宽度(width)设为高度(height)的一半,并且只设置右上角和右下角的半径与元素的高度一致(大于也是可以的)。
div.circle2{
height:50px;
width:100px;
background:#9da;
border-radius:0 50px 50px 0;
}
代码演示:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px ;/*半径至少设置为height的值*/
}
div.circle1{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;
}
div.circle2{
height:50px;
width:100px;
background:#9da;
border-radius: 50px 50px;
}
div.circle3{
height:100px;
width:50px;
background:#9da;
border-radius:50px 50px;
}
div.circle4{
height:100px; width:50px;
background:#9da;
border-radius:0px 50px 50px 0px;
} </style>
</head>
<body> <div class="circle">
</div>
<br/>
<div class="circle1"> </div>
<br>
<div class="circle2">
</div>
<br>
<div class="circle3">
</div>
<br>
<div class="circle4">
</div>
<br>
</body>
</html>
转载:http://www.imooc.com/code/380
最新文章
- Ubuntu菜鸟入门(七)—— 微信安装
- String.SubString
- 查看mysqll账号信息
- Unity的物理引擎是如何实现碰撞的呢?
- cisco路由器配置教程
- C#程序员整理的Unity 3D笔记(十三):Unity 3D基于组件的思想
- 07_XPath_01_入门
- Android 虚拟机Dalvik、Android各种java包功能、Android相关文件类型、应用程序结构分析、ADB
- Unity3D动态加载外部资源
- Repeater绑定数据库
- Python 一等函数
- JSP入门 taglib
- Linux系列教程(十五)——Linux用户和用户组管理之用户管理命令
- 服务器 : Apache Tomcat - 理解架构层次
- Gym100814B Gym100814F Gym100814I(异或) ACM International Collegiate Programming Contest, Egyptian Collegiate Programming Contest (2015) Arab Academy for Science and Technology
- A network-related or instance-specific error occurred while establishing a connection to SQL Server
- win10释放的wifi热点手机连不上
- 名字top500字典 各种格式及python脚本
- vscode git
- Java中==和equals的比较
热门文章
- 双三次插值C代码(利用opencv)
- c++实验9 图及图的操作实验
- spring的组件工厂后置处理器——BeanFactoryPostProcessor
- Apache监控调优
- vue路由高级用法
- python 使用 with open() as 读写文件
- SQLSERVER 备份恢复之后提示缺少创建表权限的问题解决
- [19/05/27-星期一] JavaScript_ 条件语句(if语句)和循环语句(while 、for、do-while)
- 在excel中如何计算两个时间之间的差[转]
- Spark-Core RDD依赖关系