CSS3边框border-radius
2024-10-19 07:38:18
一、官方解释
设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数。
水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
如果只提供一个，将用于全部的于四个角。
如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
垂直半径也遵循以上4点。
对应的脚本特性为borderRadius。
二、例子
2.1 四个参数值
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50px;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 100px;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50px 100px;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 10px 30px 50px 100px;"></div>
所以border-radius里面的参数应该代表的是四个角上圆的半径。
2.2 百分比
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 25%;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50%;"></div>
2.3 水平半径/垂直半径
<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 100px/150px;"></div>
<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 200px/300px;"></div>
<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 200px/200px;"></div>
这里的半径全等于本身宽度(width/2)+半径宽度(border-width/2)即为一个椭圆。另外半径最多渲染宽度(width/2)+半径宽度(border-width/2)的值，超过的按比例值来算。
最新文章
- 算法是什么我记不住，But i do it my way. 解一道滴滴出行秋招编程题。
- Redis与KV存储(RocksDB)融合之编码方式
- 公众号第三方平台开发 获取 component_verify_ticket 2015-07-05 10:16 59人阅读 评论(0) 收藏
- PHP模拟POST请求，获取response内容
- shell 删除文件下的* (copy).jpg备份文件
- sublime text3侧边栏主题不生效问题解决
- python获取外网地址
- Idea1.5使用Maven搭建Apache Spark1.6源码阅读环境
- bzoj3052
- 【.net 深呼吸】项目中是否有必要删去多余的引用
- Django1.10 release notes摘编
- Linux常见命令（一）
- FTP服务器匿名登录
- requests库的基本使用
- 20165306 Exp3 免杀原理与实践
- JDK的动态代理-----为接口进行代理
- 本地上传项目到github
- Linux系统下升级Python版本步骤（suse系统）
- Spring Batch 批量处理策略
- java多线程——监视锁(monitor)（转）