CSS3 border-radius圆角的实现方法及用法详解


Posted in HTML / CSS onSeptember 14, 2020

以前想实现一个圆角是比较麻烦的,不过现在CSS3来了,实现圆角变的那么的简单只需要一句话:border-radius即可。下面青岛星网跟大家分享下:border-radius的具体用法。

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

border-radius的浏览器支持

IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius属性。

早期版本的Safari和Chrome,支持-webkit-border-radius属性。

早期版本的Firefox支持-moz-border-radius属性。

目前来看,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。

-moz-border-radius: 15px;
border-radius: 15px;

(注意:border-radius必须放在最后声明,否则可能会失效。)

另外,早期版本Firefox的单个圆角的语句,与标准语法略有不同。

-moz-border-radius-topleft(标准语法:border-top-left-radius)
-moz-border-radius-topright(标准语法:border-top-right-radius)
-moz-border-radius-bottomleft(标准语法:border-bottom-left-radius)
-moz-border-radius-bottomright(标准语法:border-bottom-right-radius)

border-radius的实例制作

CSS3 border-radius圆角的实现方法及用法详解

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
 
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
 
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。

但是,如果你要在四个角上一一指定,可以使用以下规则:

四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角

两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角

一个值: 四个圆角值相同

CSS3 border-radius单个圆角的设置

单个圆角的设置除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

到此这篇关于CSS3 border-radius圆角的实现方法及用法详解的文章就介绍到这了,更多相关CSS3 border-radius圆角内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
利用CSS3的定位页面元素
Aug 29 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 #HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 #HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 #HTML / CSS
css3实现动画的三种方式
Aug 24 #HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 #HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 #HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 #HTML / CSS
You might like
Smarty Foreach 使用说明
2010/03/23 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
js编写简单的计时器功能
2017/07/15 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
Django框架实现的简单分页功能示例
2018/12/04 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
视图的作用
2014/12/19 面试题
TCP/IP的分层模型
2013/10/27 面试题
有针对性的求职自荐信
2013/11/14 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
大学副班长竞选稿
2015/11/21 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
element多个表单校验的实现
2021/05/27 Javascript