border-radius几种写法的原理剖析

border-radius:40px;
border-radius:40px/20px;
border-radius:40px 20px;
border-radius:40px 20px 10px 5px;

今天主要是测试上面四种border-radius的写法。

首先是第一种。

border-radius:40px;

这里设置了一个值，所以默认4个角都显示为半径40的圆角，蓝色方框为40像素宽的正方形。所以也就是相当于圆的半径。

第二种

border-radius:40px/20px;

这里除了40px外还加了一个 /20px 这里的意思是将圆角定义为椭圆，其实正圆本来不就是椭圆的一种特殊情形吗？这种表示虽然有，但是平常用的不多。

第三种

border-radius:40px 20px;

这种和第二种写法的区别是没有 / 符号，其意义和普通的设置边距什么的是一样的。就是代表上下左右的意思。不废话直接看图。

第四种

border-radius:40px 20px 10px 5px;

第四种是为了写出顺序，从左上角顺时针到左下角，就是border-radius属性的值的设置顺序。

转载请注明：来自博客园，manfredHu

谢谢大家

转载于:https://www.cnblogs.com/manfredHu/p/4376739.html

border-radius几种写法的原理剖析相关推荐

【小家Spring】SpringBoot中使用Servlet、Filter、Listener三大组件的三种方式以及原理剖析
每篇一句要么就安逸的穷,要么就拼命的干前提概要 web开发使用Controller基本能解决大部分的需求,但是有时候我们也需要使用Servlet,因为相对于拦截和监听来说,有时候原生的还是比较好用 ...
数组指针之茴香豆有几种写法
C语言函数只能返回一个值,如果想要在函数中修改多个值怎么办呢? 第一个办法是通过结构体,第二个办法就是使用指针了. 可以把变量的地址传给函数,然后通过指针修改该地址上的值.例如: float data ...
统计学习方法|支持向量机(SVM)原理剖析及实现
欢迎直接到我的博客查看最近文章:www.pkudodo.com.更新会比较快,评论回复我也能比较快看见,排版也会更好一点. 原始blog链接: http://www.pkudodo.com/2018/ ...
统计学习方法|朴素贝叶斯原理剖析及实现
欢迎直接到我的博客查看最近文章:www.pkudodo.com.更新会比较快,评论回复我也能比较快看见,排版也会更好一点. 原始blog链接: http://www.pkudodo.com/2018/ ...
Vue2的核心原理剖析
✨ 用了这么久的Vue2了你真的知其然,知其所以然么? ✨今天博主就为大家带来一篇对Vue核心功能的部分剖析\textcolor{pink}{今天博主就为大家带来一篇对Vue核心功能的部分剖析}今天 ...
基于JS实现回到页面顶部的五种写法(从实现到增强)
为什么80%的码农都做不了架构师?>>> 写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返 ...
Go框架 gin 源码学习--路由的实现原理剖析
往期回顾: gin源码解析 - gin 与 net/http 的关系 gin 源码解析 - 详解http请求在gin中的流转过程上面两篇文章基本讲清楚了 Web Server 如何接收客户端请求,以 ...
js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)
写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [ ...
视频教程-Java异常原理剖析-Java
Java异常原理剖析曾任职于国内知名校企合作单位.超过6年教育行业工作经验.曾在多家线上教育平台讲授过公开课.和VIP课程,擅长讲授JAVASE.JAVAWEB相关的课程.授课氛围清晰自然,讲解内容 ...
react16常见api以及原理剖析
Vue 与 React 两个框架的粗略区别对比 Vue 的优势包括: 模板和渲染函数的弹性选择简单的语法及项目创建更快的渲染速度和更小的体积 React 的优势包括: 更适用于大型应用和更好的可测 ...

border-radius几种写法的原理剖析

border-radius几种写法的原理剖析相关推荐

最新文章

热门文章