css border-radius的用法及自适应的椭圆

我们知道border-radius允许您为元素添加圆角边框!

而border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。

如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

先看个例子。

如果将有个正方形元素设置一个border-radius值为边长的一半,则可以得到一个圆形。

width: 200px;height: 200px;border-radius: 100px;background: brown;

效果图:

1122059-20170410120053969-411201575.png

 

这里宽高是固定的且相等,如果宽高不相等则显示为一个椭圆。

宽高不等效果图:

1122059-20170410120732922-805564916.png

自适应椭圆

由于根据实际情况出发,我们希望它能根据实际的内容自动调整并适应。

 

解决方案:

一个鲜为人知的秘密,border-radius可以单独设置水平和垂直的半径,只需要用一个斜杠(/)分隔这二个值就行。此外我们还要知道border-radius不仅可以接受长度值还可以接受百分比值。

width: 150px;height: 100px;border-radius: 50%/50%;    //简写属性:border-radius:50%
background: brown;

只需这一行简单的代码就可以完成自适应的椭圆了。很神奇吧。

 

半椭圆

我们知道border-radius是个简写属性,它得展开式:

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-botom-left-radius

这四个字如上的顺序,从左上角开始顺时针应用到元素其他三个角上。

但是真正简介的写法还是使用border-radius这个简写属性,只需对应上面的规则,用空格分开多个值,也能达到展开式的效果。

如果只提供了三个值:1 2 3 则第4个值和第2个值相同。如果只提供了二个值:1 2 则1 3相同,2 4值相同。

我们甚至可以为四个角设置不同的水平和垂直半径,方法就是在斜杠前指定一到四个值,斜杠后指定一到四个值。

    width: 150px;height: 100px;border-radius:  50%/0 0 100% 100%;background: brown;

1122059-20170410125638063-1888257124.png

变换一下:

    width: 150px;height: 100px;border-radius:  50%/100% 100% 0 0;background: brown;

1122059-20170410125739297-170131791.png

来一个小红帽:

    width: 150px;height: 100px;border-radius:  50%/50% 50% 0 0;background: brown;

1122059-20170410125906454-1500220143.png

 

    width: 150px;height: 100px;border-radius:   100% 0  0 100%/ 50%;background: brown;//沿着纵轴切开的椭圆

1122059-20170410163056688-123899505.png

同理,可以得出:

    width: 150px;height: 100px;border-radius: 0  100% 100% 0/ 50%;background: brown;

 

1122059-20170410163310313-1852424565.png

 

四分之一的椭圆

那么,有办法得到四分之一椭圆呢?我们从效果图看出,创建一个四分之一的椭圆,只要一个角的水平和垂直半径值都需要是100%,

而其他三个角都不能设圆角。因为四个角的水平和垂直半径方向上是相同的,所以不需要用斜杠语法了。

所以

 

    width: 150px;height: 100px;border-radius:0 0 100% 0;background: brown;

效果如下:

1122059-20170410164018860-517944682.png

 

热门文章

暂无图片
编程学习 ·

安卓安全那点事

本文旨在对于一个安卓app的安全知识做一个较为泛泛的总结,为开发出更安全的应用提供思路。内容比较粗略,仅起到抛砖引玉的效果,还望大家见谅。Android应用的安全 意义 在维基百科上有一个关于计算机安全的定义: 计算机安全(computer security)是计算机与网络领域的信息安…
暂无图片
编程学习 ·

创新实训(10)-提取式文本摘要之bert聚类

创新实训(10)-提取式文本摘要之bert聚类 1. 思路 使用bert作为预训练模型,利用bert生成的词向量进行下游任务的处理,在这篇论文中使用的是k-means计算词向量分布的重心作为文本摘要的候选句子。可以看作是聚类的一种形式。 2.代码分析 基于Pytorch的Transformers框架,使用预…
暂无图片
编程学习 ·

牧牛链,牧牛帮排线

牧牛链医疗鉴证区块链 截至到目前为止,国家大数据局尚未完成对所有医疗机构内生成的医疗数据收集整理,也未完成对居民个人健康档案或病历的电子化进程。医疗机构上传数据和居民主动上传意愿不强烈。越来越多的医疗纠纷报道已经严重影响到医生群体的工作热情。许多医生对于基于…
暂无图片
编程学习 ·

IIs7上传文件大小光设置web.config还不行

打开你系统盘(我是C盘),找到 C:\Windows\System32\inetsrv\config\schema目录,该目录下有一个IIS_schema.xml修改这个:<attribute name="maxAllowedContentLength" type="uint" defaultValue="30000000" />"单位byte
暂无图片
编程学习 ·

通过过滤器Filter解决post/get请求中文编码问题示例代码

##编码过滤器 功能:将客户端发送过来的数据(尤其是中文)都转换成UTF-8,这样后续的处理就不需要做其他额外的编码转换,做到编码前后统一 实现说明: 对于post请求以及响应可以直接调用setCharacterEncoding方法设置编码格式,而对于get请求,由于get请求参数是通过路径传参,而…
暂无图片
编程学习 ·

zabbix 安装

文章目录zabbix 4.0 安装安装php7.2(也可以跳过这个依赖)安装mcrypt扩展安装仓库配置包安装 zabbix-server-mysql、zabbix-web-mysql 及zabbix-agent安装 zabbix-server-mysqlzabbix数据库创建创建数据库 zabbix添加zabbix账号导入数据:zabbix_server 配置修改启动zabbix_serve…
暂无图片
编程学习 ·

React 生命周期详细解析及新旧对比

React 生命周期(旧)react旧版生命周期包含三个过程: 1、挂载过程 constructor() componentWillMount() componentDidMount() 2、更新过程 componentWillReceiveProps(nextProps) shouldComponentUpdate(nextProps,nextState) componentWillUpdate (nextProps,nextState) re…
暂无图片
编程学习 ·

Linux基础——进程和计划任务管理(九)

进程和计划任务管理1 程序和进程的关系2.查看进程2.1 ps命令——查看静态的进程统计信息2.1.1 ps命令基本格式2.1.2 ps aux命令 以简单列表的形式显示出进程信息2.1.3 ps aux | grep(进程名)命令2.1.4 ps -elf 命令:以长格式显示系统中的进程信息2.2 top命令——查看进程动态…
暂无图片
编程学习 ·

「进击的前端工程师」JavaScript设计模式(一)

微信搜索【前端食堂】你的前端食堂,记得按时吃饭。 本文已收录在前端食堂 Github https://github.com/Geekhyt/front-end-canteen,感谢Star。在开始阅读本文之前,大家可以先去看一下这个问题前端未来几年的发展方向是什么? 有一个简单的大局观,造完了火箭,再回归正文,我…
暂无图片
编程学习 ·

route-map

一、关于route-maproute map可用于路由的再发布和策略路由,还经常使用在BGP中。策略路由实际上是复杂的静态路由,静态路由是基于数据包的目标地址并转发到指定的下一跳路由器,策略路由还利用和扩展IP ACL链接,以便提供更多功能的过滤和分类。如下图,在R2上将OSPF路由重发布…
暂无图片
编程学习 ·

python学习必备技巧(待更新)

python学习必备技巧(待更新) 文章目录python学习必备技巧(待更新)一、用help()查看python + 工具包的API二、如何阅读函数参数1、函数参数中*args, **kwargs表示什么2、如何查看默认参数描述三、参考文档 一、用help()查看python + 工具包的API 最近开始自学python,但是网…
暂无图片
编程学习 ·

从小破站到大B站:哔哩哔哩变味了?

配图来自Canva 继《后浪》和《入海》之后,B站又拍片了。 作为B站三部曲的最终章,B站选择在自己11周年之际,发布这条由老年人主演的《喜相逢》。不同于之前的两部短片,这次的短片更像是传统意义上的广告片。伴随着男主角追寻夕阳爱情的脚步,说出那句“众所周知,B站是一个学…
暂无图片
编程学习 ·

pyspark入门整理

最近工作需要对千万以上数据做特征处理,为了提升运(zao)算(ri)效(xia)率(ban),开始使用pyspark做分布式运算。也是从基本开始学习,先把用到的一些资料贴在这里,日后有空结合业务进一步整理。(一)原理篇一文弄懂PySpark原理与实践 https://blog.csdn.net/oTengYue…
暂无图片
编程学习 ·

词向量对齐在多语言任务上应用

作者:欢迎关注知乎机器学习小谈【目录】1. 前言 2. 通过监督学习对齐 3. 通过无监督学习对齐 4. 应用与总结 5. 参考1. 前言 在公司业务需求背景下,我需要解决来源不同语言语料的NLP问题如多语言(具体是中英日韩)情感分析,翻译(n种语言翻译成英语)。以前的时候总是为每总…
暂无图片
编程学习 ·

json转bean,Date格式转化处理(fastJson)

业务:json转成实体类,实体中有Date格式,直接转换报错!!!报错:Exception in thread "main" com.alibaba.fastjson.JSONException: For input string: "2018/11/16 3:06:41"废话不多说,直接上!json串:{id:181116030522211648,sendtime:2018/11/16 …