CSS border-radius边框圆角

在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置。

目录

1. 介绍

2. value值的格式和类型

3. border-radius 1~4个参数说明

4. 在线示例

 

1. 介绍

1.1 圆角属性

CSS3提供了5种圆角属性

border-radius :同时设置4个边框的圆角样式。

border-top-left-radius :设置左上角边框的圆角样式。

border-top-right-radius :设置右上角边框的圆角样式。

border-bottom-left-radius :设置左下角边框的圆角样式。

border-bottom-right-radius :设置右下角边框的圆角样式。

示例

 

1.2 浏览器支持情况

最小版本支持:IE 9 、Chrome 4

 

1.3 引用资料

规范:https://www.w3.org/TR/css3-background/#the-border-radius

文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

 

2. value值的格式和类型

border-*-radius属性的值可分别设定水平半径垂直半径若省略垂直半径,则垂直半径默认采用水平半径的值。

而每个值,支持的单位有固定长度百分比若设置百分比格式,则水平半径的百分比是指边框的宽度,而垂直半径的百分比是指边框的高度。

组合如下(以border-radius为例):

1) border-radius:20px; // 表示圆角的水平半径垂直半径都为20px长度。

2) border-radius:20px/40px; // 表示圆角的水平半径的长度为20px,垂直半径的长度为20px。

3) border-radius:20%; // 表示圆角的水平半径垂直半径都为各自边框长度的20%。

4) border-radius:20%/30%; // 表示圆角的水平半径为边框宽度的20%,垂直半径都为边框高度的20%。

5) border-radius:20px/30%; // 表示圆角的水平半径长度20px,垂直半径都为边框高度的20%。

示例

 

3. border-radius 1~4个参数说明

border-radius可以一次性对四个角设置相同的值,也可以对4个角分别设置圆角样式。

而秘诀就在于设定border-radius的参数个数。

首先看下CSS规范对border-radius的参数说明:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

可得知border-radius的参数个数范围为1~4个,这里要注意点水平半径和垂直半径的分别使用时:在border-radius中先设置4个边角的水平半径再设置4个边角的垂直半径。

下面分别说明参数1~4个参数所代表的含义:

3.1 参数个数:1

说明:4个边框的圆角样式都采用这个设置。

示例:border-radius: 20px; // 4个边框圆角样式都为20px

 

3.2 参数个数:2

说明

  第①参数:左上角和右下角边框的圆角样式。

  第②参数:右上角和左下角边框的圆角样式。

示例:border-radius: 20px 40px; // 左上角和右下角:20px;右上角和左下角:40px

 

3.3 参数个数:3

说明

  第①参数:左上角边框的圆角样式。

  第②参数:右上角和左下角边框的圆角样式。

  第③参数:右下角边框的圆角样式。

示例:border-radius:20px 40px 60px; // 左上角:20px;右上角和左下角:40px;右下角:60px

 

3.4 参数个数:4

说明

  第①参数:左上角边框的圆角样式。

  第②参数:右上角边框的圆角样式。

  第③参数:右下角边框的圆角样式。

  第④参数:左下角边框的圆角样式。

示例:border-radius:20px 40px 60px 80px; // 左上角:20px;右上角:40px;右下角:60px;左下角:80px

 

4.在线示例

4.1 示例

style="width: 100%;" title="CSS3-1-border-radius" src="http://codepen.io/polk6/embed/LbNdMe/?height=300&theme-id=24805&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="300">

 

4.2 在线地址

地址:http://www.akmsg.com/WebDemo/CSS3-border-radius.html

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362705.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

element实现动态路由+面包屑

要掌握&#xff1a;localStorage&#xff0c;组件封装 ​​​​ emm&#xff0c;第一次上传视频转gif的图片&#xff0c;效果不咋好。。。 视频转gif 的软件连接 http://www.zxt2007.com/downloads.html 找到一个可以截取部分视频制作gif图的软件https://soft.onlinedo.cn/gif…

Matlab——矩阵运算 矩阵基本变换操作

矩阵运算 加 - 减 .* 乘 ./ 左除 .\ 右除 .^ 次方 . 转置 除了加减符号&#xff0c;其余的运算符必须加“.” >> a 1:5a 1 2 3 4 5>> a-2 %减法ans -1 0 1 2 3 >> 2.*a-1 %乘法 减法ans 1 3 5 7 9 >&g…

Oracle最新的Java 8更新破坏了您的工具-它是如何发生的?

如果您最近一直在关注Java世界的消息&#xff0c;那么您可能听说过Oracle发布的最新Java 8构建&#xff0c;Java 8u11&#xff08;和Java 7u65&#xff09;引入了错误并破坏了一些流行的第三方工具&#xff0c;例如ZeroTurnaround的JRebel&#xff0c;Javassist&#xff0c;Goo…

为什么选择Dojo - 记Dojo中文博客正式开张

公告栏里写到&#xff1a;Dojo的高门槛一旦跨过&#xff0c;必将别无所求。含义有二&#xff1a;第一&#xff0c;Dojo难学&#xff1b;第二&#xff0c;Dojo很强大。 这也揭示了本博客的目标&#xff1a;帮助大家用好Dojo这个优秀的Ajax框架。 在回答为什么选择Dojo之前&#…

ExtJS 4.2 第一个程序

本篇介绍如何创建一个ExtJS应用程序。并通过创建目录、导入文件、编写代码及分析代码等步骤来解释第一个ExtJS程序。 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index.html 1.4 运行图 2. 代码分析 2.1 Ext.onReady() 2.2 Ext.create() 1. 创建程序 1.1 创建目录…

ZooKeeper,策展人以及微服务负载平衡的工作方式

Zookeeper如何确保每位工人都能愉快地从工作委托经理那里得到一些工作。 Apache ZooKeeper是注册&#xff0c;管理和发现在不同计算机上运行的服务的工具。 当我们必须处理具有许多节点的分布式系统时&#xff0c;它是技术堆栈中必不可少的成员&#xff0c;这些节点需要知道其…

elementUI清空弹框中的表单数据

点击此处直达应用场景示例 官网&#xff1a;https://element.eleme.cn/#/zh-CN/component/form 补充&#xff1a;改变表头颜色&#xff1a; <el-table :data"tableData" border style"width: 100%" :header-cell-style"{background:#d3dce6,col…

(一)PHP基础知识考察点

1&#xff0c;PHP引用变量的考察点&#xff1a; 概念&#xff1a;引用就是用不同的名字访问同一个变量内容。 定义方式&#xff1a; 使用&符号。 PHP引用变量的工作原理 这里有个COW copy on write 用zval&#xff08;&#xff09;去查看空间占用情况以及引用情况。 unse…

.Net4.0 Parallel编程(三)Data Parallelism下

在上篇文章中介绍了如何Break、Stop循环&#xff0c;以及如何定义线程局部变量。在本文中介绍如何在外部去取消循环、以及异常的处理。 Cancel 在并行的循环中支持通过传递ParallelOptions参数中的CancellationToken进行取消循环的控制&#xff0c;我们可以CancellationTokenSo…

节点的运用和方法

JQUERY的父&#xff0c;子&#xff0c;兄弟节点查找方法 jQuery.parent(expr) 找父亲节点&#xff0c;可以传入expr进行过滤&#xff0c;比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(ex…

Java:使用终止信号确定数据导入的状态

几周前&#xff0c;我正在尝试将约6000万位数据最初导入Neo4j&#xff0c;但我们一直遇到一个问题&#xff0c;即导入过程似乎停滞了&#xff0c;什么也没导入。 很难分辨该过程中发生了什么—采取线程转储只是告诉我们它正在尝试处理CSV行中的一行&#xff0c;并且以某种方式…

根据可视窗口判断面板向上还是向下展开

本demo以element-ui框架为视图模板~ HTML代码 JS代码 CSS代码 转载于:https://www.cnblogs.com/dreamsqin/p/10885502.html

关于几本模拟IC设计书

1.P.R.Gray的书  这本书被业界誉为模拟IC的Bible&#xff0c;盛名之下&#xff0c;必无虚士。现在已经出到第四版&#xff0c;作者无一例外是业界大牛&#xff0c;该书论述严谨&#xff0c;思路清晰&#xff0c;对电路分析透彻&#xff0c;定义严格明确&#xff0c;无愧Bible…

编写JUnit测试的另一种方法(Jasmine方法)

最近&#xff0c;我为一个小型个人项目编写了很多Jasmine测试。 我花了一些时间才终于感到正确地完成了测试。 此后&#xff0c;当我切换回JUnit测试时&#xff0c;我总是很难过。 出于某种原因&#xff0c;JUnit测试不再那么好&#xff0c;我想知道是否有可能以类似于Jasmine的…

H5 input输入限制最大位数,和调用小键盘需求发生冲突的解决办法

首先&#xff0c;限制输入最大位数时&#xff0c;input有自带的属性maxlength。 <input type"text" name"email" maxlength"55" /> 使用方法&#xff1a;maxlength"位数" 但是&#xff0c;对于这个属性他是有自己的限制条件的 …

解决vue项目在ie浏览器中不显示的问题

安装 “babel-polyfill” npm install babel-polyfill --save-dev 或者 cnpm install babel-polyfill --save-dev在入口 main.js 文件引入&#xff1a;import babel-polyfill在 build 文件下的 webpack.base.conf.js 文件中修改代码&#xff1a; entry: {app: ["babel-p…

Spark-Luanch Driver

1.SparkSubmit.scala主要调用M-prepareSubmitEnvironment&#xff0c;该方法更根据用户定义的参数&#xff0c;匹配不同client&#xff0c;去调用不同clientApp。(ps&#xff1a;本次讲ClientApp 也就是standalone)在M-runMain通过 调用M-Utils.classForName 反射的方式调用 …

大风大浪大鱼

一群年轻人常在一泓深潭边钓鱼&#xff0c;而有一个渔夫总是在潭上边水流湍急的河里捕鱼。 年轻人觉得这渔夫可笑&#xff0c;在大风大浪的河里怎么会捕到鱼呢?有一天&#xff0c;年轻人忍不住去问渔夫&#xff1a;“鱼能在这么湍急的地方停留吗?”渔夫说&#xff0c;当然不能…

清空表单时出现问题

打开页面时报警告&#xff1a; 解决办法&#xff1a; &#xff08;1&#xff09;npm i default-passive-events -S &#xff08;2&#xff09;main.js中加入&#xff1a;import ‘default-passive-events’ 参考&#xff1a;https://www.jianshu.com/p/23850d4cade8 出现原…