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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 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
PHP mkdir()定义和用法
2009/01/14 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Python timeit模块原理及使用方法
2020/10/10 Python
python函数超时自动退出的实操方法
2020/12/28 Python
python爬虫基础之urllib的使用
2020/12/31 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
SQL数据库笔试题
2016/03/08 面试题
综合办公室主任职责
2013/12/16 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
党员培训思想汇报
2014/01/07 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
少先队入队活动方案
2014/02/08 职场文书
大学生标准自荐书
2014/06/15 职场文书
北京爱情故事观后感
2015/06/12 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
详解Vue的options
2021/05/15 Vue.js
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
redis 存储对象的方法对比分析
2021/08/02 Redis