玩坏css之border-radius属性
最近看了一本书, 《css揭秘》[希] LEA VEROUS 著
都是关于css3之类的标签属性之类的;今天演示一下:border-radius这个属性;【因为总觉得作者的数学不是很好,不过还是很感谢她的】
首先我们要接受 【border-radius: 50% / 50%】,第一个百分之50%,代表水平方向的距离,第二个代
竖直方向的距离;
现在我们border-radius:50% / 50% 展开:border-radius:50% 50% 50% 50% /50% 50% 50% 50% 颜
色相对应的都是指同一个角
首先我们要理解椭圆或圆是怎么画的,椭圆的话,我们首先要知道椭圆的长半径和短半径确定中心点,同理
画圆也需要半径确定中心点;所以重点便是【中心点的选择】
我们都知道 border-radius: 50%时,那么就会变成椭圆
然而真真的原理就在这个时刻哦:
首先我们先理解:这个椭圆是由四个1/4的椭圆组成,正好对应四个角;让每个角都变成1/4的椭圆就是我们
所需要做的;
首先左上角要形成四分之一椭圆,那么图上的两个红心的交点便是中心点;这个中心点的位置:就是其水平
距离50%,竖直距离是50%;同样:其他三个角也是这样;
懂了没?
看看我做的形状:
再来演示第二个border-radius:
首先我们可以确定:
第一个角的中心点: 水平方向50%,竖直是100%;
第二个角的中心点: 水平方向0, 竖直方向0;
第三个角的中心点: 水平方向50%, 竖直是100%;
第四个角的中心点: 水平方向0, 竖直方向0;
转载或引用本网版权所有之内容须注明“转自(或引自)云栖社区”字样,并标明本网网址yq.aliyun.com
谢谢大家,获取更多精华技术IT资讯,请持续关注云栖社区“达摩老祖”and"码上有钱"
需要购买阿里云各种产品,点击文字链领取阿里云通用打折劵相关文章
- SpriteBuilder中pivot关节中的Collide bodies属性
- 详解 CSS 属性 - position
- Discuzx系统 CSS 编码规范,CSS属性书写顺序
- spring boot下为配置属性值加密的正确姿势
- 当css属性width设为100%时
- CSS覆盖公共样式中的某个属性
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
- js监听指定元素的css动画属性
- Python - 属性简介"__name__"
- [CSS] Purgecss to remove unused css
- css属性pointer-events
- css 属性选择器
- 自定义控件:滑动开关按钮(自定义属性)
- Android之布局属性归纳
- 前端学习 -- Css -- 属性选择器
- [HTML/CSS]margin属性用法
- 在ArcEngine下实现图层属性过滤的两种方法
- SAP CRM附件的技术属性设计原理
- 一个css属性选择器的实际例子
- CSS里的inline-size和逻辑属性
- Angular routerLink指令的href属性生成逻辑
- BigData:数据中台相关术语概念简介—数据域/业务过程/业务域/指标字典/指标类型/原子指标/派生指标/度量/维度/维度属性/时间周期/修饰词/修饰类型等之详细攻略
- setattr()、getattr()、hasattr()【设置属性和方法、得到属性、判断是否有属性和方法】
- 【Android Gradle 插件】Gradle 扩展属性 ④ ( 扩展属性访问方式 | 直接访问扩展属性 | 通过 ext 对象访问 | 在 gradle.properties 中定义扩展属性 )
- 【Android Gradle 插件】CompileOptions 配置 ( BaseExtension#compileOptions 脚配块配置 | CompileOptions 属性配置 )
- 【OpenCV 例程300篇】05. 图像的属性(np.shape)
- CSS背景属性之颜色渐变
- Qt编写控件属性设计器4-加载属性