CSS3: border-radius边框圆角详解
border-radius
基本语法:
border-radius : none | <length>{1,4} [/ <length>{1,4} ]?
取值范围:
<length>: 由浮点数字和单位标识符组成的长度值。不可为负值。
如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。
但是,如果你要在四个角上一一指定,可以使用以下规则:
- 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
- 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
- 一个值: 四个圆角值相同
接下来通过实例了解border-radius具体用法:
一:border-radius只有一个取值时,四个角具有相同的圆角设置,其效果是一致的:
1 .demo1 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid #ff0000; 6 border-radius: 10px; /*4个角的值相等*/ 7 }
效果:
二:border-radius有二个取值时,左上角和右下角相同,右上角和左下角相同的:
1 .demo2 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid #ff0000; 6 border-radius: 5px 10px; 7 }
效果:
三:border-radius有三个取值时,此时左上取第一个值,右上等于左下并且他们取第二个值,右下取第三个值:
1 .demo3 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid #ff0000; 6 border-radius: 5px 10px 15px; 7 }
效果:
四:border-radius设置四个值,此时左上取第一个值,右上取第二个值,右下取第三个值.左下取第四个值:
1 .demo4 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid #ff0000; 6 border-radius: 5px 10px 15px 20px; 7 }
效果:
方便理解记忆 :
如下图,从左上开始1,2,3,4,四个角。不管是几个值,从1开始对号入座,没有值的取对角值,当然1个值的时候就4个角都相等,这样不论水平半径和垂直半径是否相等,都可以很好的理解,不容易出错。
接下来看看细分了水平半径和垂直半径的情况:
先来个小demo吧----
1 .demo5 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid #ff0000; 6 border-radius: 20px / 40px; /*水平半径/垂直半径*/ 7 }
效果:
可以看到,水平和垂直半径的值分开设置了,不再一样,还是可以1,2,3,4对号入座,只是水平和垂直半径分开了而已。
20px / 40px 斜杠‘/’前面的是水平半径的值,后面是垂直半径的值。同样,每个角的水平和垂直半径也可以分别设置成不一样的。
1 .demo6 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 2px solid #ff0000; 6 border-radius: 10px 20px 15px 30px / 40px 5px 30px 10px; /*水平半径/垂直半径*/ 7 }
效果:
每个角都设置了不同的水平和垂直半径,各有风骚了。不管怎么设置值,都可以从左上角开始一一对号入座,没有取到值的,就取对角的值。
现在大家可以大开脑洞,设置不同半径,制作特殊的图案了,这里就不费篇幅一一列出来了。
用border-radius画圆
先来demo---
1.无边框的圆形
1 .demo7 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 /*border: 2px solid #ff0000;*/ 6 border-radius: 40px; 7 }
效果:
不带边框的圆,只需宽和高相等,border-radius为宽高的一半就可以了。
2.有边框的圆形
有边框的圆,就需要把边框的宽度也考虑进去。先来个反例:
1 .demo8 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 5px solid #ff0000; 6 border-radius: 40px; 7 }
效果:
可以看到,忽略了边框的宽度,只设置border-radius为宽高的一半,出来的就不是圆了。
再看一个考虑了边框的demo
1 .demo9 { 2 width: 80px; 3 height: 80px; 4 background: #3ad7d7; 5 border: 5px solid #ff0000; 6 border-radius: 45px; 7 }
效果:
结果就显而易见了。所以在画圆的时候还要注意有无边框。
最后附上一个小demo。
<!DOCTYPE html> <html> <head><style>body{margin:30px;background-color:#ffffff;}div.polaroid{position: relative;top: 50%;left: 50%;width: 16px;height: 16px;background-color: white;animation:localShine 2s linear infinite;border-radius: 8px}@keyframes localShine{from {box-shadow:0 0 0 0 #E6E6E6;}to {box-shadow:0 0 0 6px #cbcbcb;}}</style> </head> <body><div class="polaroid"> </div></body> </html>
效果:
转载于:https://www.cnblogs.com/zhengxiao/p/5865083.html
CSS3: border-radius边框圆角详解相关推荐
- CSS3中(border-radius)边框圆角详解
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
- css 外弧_CSS3圆角详解
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...
- CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
- html渐变线条代码,css3线性渐变语法的详解(代码示例)
本篇文章给大家带来的内容是css3线性渐变语法的详解(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 线性渐变的完整语法:.demo { background: line ...
- html中以菱形为边框,深入浅析css3 border-image边框图像详解
我的作风:首先给大家作自我介绍 hello,大家好,我叫小黑,也叫xiaoho,目前喜欢并从事写页面.因为不喜欢在那些类似BBS型的论坛上发帖,所以之前在 html-js 上发表几篇戳文,现在申请了前 ...
- 如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
- css3属性之边框圆角、背景与渐变
css3之圆角.背景及渐变 border-radius 兼容性:IE9+.Firefox 4+.Chrome.Safari 5+ 以及 Opera border-radius 属性允许我们为元素添加圆 ...
- css3 border img 边框图片
摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...
- 拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
最新文章
- 打工皇帝杨元庆年薪达2136万美元 联想称很合理
- java在线网页客服聊天_管理员消息java 网站用户在线和客服聊天
- Kafka中副本机制的设计和原理
- 使用Protobuf推动微服务和REST API的开发
- 内核与ramdisk到底是什么关系
- ADB usb 或 WiFi 连接手机 ADB工具下载
- 【软件工程师学硬件】之 单片机
- php工具箱下载安装方法
- 农业农村部:发现生猪、野猪异常死亡应立即报告
- 微信会员卡实现门店信息化会员管理
- 爬虫玩得好,牢饭吃到饱?这3条底线千万不能碰!
- 人力资源分析思维以及有必要学习数据分析吗?
- 内存条编号意义--怎么看内存条型号大小
- 互联网金融想革中国金融体系的命?
- bzoj1605 / P2905 [USACO08OPEN]农场危机Crisis on the Farm
- Windows一键删除指定文件或文件夹
- (8)Artemis检测(僵尸连接、慢消费者、代理异常)
- 根据汉字获取它的字符串拼音首字母(大写),含多音字
- afterlogic webmail lite php,AfterLogic WebMail最新版任意文件包含 | CN-SEC 中文网
- 谷歌seo外链预算方案,影响谷歌反向链接成本的因素