一篇文章带你了解CSS3圆角知识
一、浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。
属性 | Chrome | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
二、border-radius 属性
1. 创建具有背景图的圆角
CSS3中,可以使用border-radius
属性,为元素指定圆角显示。
代码如下:
<!DOCTYPE html><html><meta charset="UTF-8"><title>项目</title><head><style>#rcorners1 {border-radius: 25px;background: #f00;padding: 20px;width: 200px;height: 150px;}#rcorners2 {border-radius: 25px;border: 2px solid #73AD21;padding: 20px;width: 200px;height: 150px;}#rcorners3 {border-radius: 25px;background: url(img/fy_indexBg.jpg);background-position: left top;background-repeat: repeat;padding: 20px;width: 200px;height: 150px;}
</style></head><body><p>The border-radius property allows you to add rounded corners to elements.</p><p>Rounded corners for an element with a specified background color:</p><!--1.具有指定背景色的圆角元素--><p id="rcorners1">Rounded corners!</p><p>Rounded corners for an element with a border:</p><!--2.带边框的圆角元素:--><p id="rcorners2">Rounded corners!</p><!--3.带背景图的圆角元素--><p>Rounded corners for an element with a background image:</p><p id="rcorners3">Rounded corners!</p></body></html>
提示:
border-radius
属性实际是border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
和 border-bottom-left-radius
属性的简写。
2. 为每个角指定弧度
如果只为border-radius
属性指定一个值,则此半径将应用于所有4个角。
另外可以根据自己开发的需求,分别指定每个角。以下是规则:
四个值: 第一个值适用于左上角,第二个值适用于右上方,第三值应用于右下角,第四值适用于左下角。
三个值: 第一个值适用于左上,二值适用于右上和左下,右下第三值适用于。
两个值: 第一个值适用于左上和右下角,和二值适用于右上和左下角。
一个值: 所有的四个角都是圆的。
实例1:
1.四个值 - border-radius: 15px 50px 30px 5px
#rcorners4 {border-radius: 15px 50px 30px 5px;background: #f00;padding: 20px;width: 200px;height: 150px;
}
2.三个值 - border-radius: 15px 50px 30px
#rcorners5 {border-radius: 15px 50px 30px;background: #f00;padding: 20px;width: 200px;height: 150px;
}
3.两个值 - border-radius: 15px 50px
#rcorners6 {border-radius: 15px 50px;background: #f00;padding: 20px;width: 200px;height: 150px;
}
完整代码 :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>项目</title><style>#rcorners4 {border-radius: 15px 50px 30px 5px;background: #f00;padding: 20px;width: 200px;height: 150px;}#rcorners5 {border-radius: 15px 50px 30px;background: #f00;padding: 20px;width: 200px;height: 150px;}#rcorners6 {border-radius: 15px 50px;background: #f00;padding: 20px;width: 200px;height: 150px;}
</style>
</head>
<body><p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p><p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p><p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p></body>
</html>
实例2:
创建椭圆形的圆角
创建椭圆形的圆角
椭圆边框 :border-radius: 50px/15px
#rcorners7 {border-radius: 50px/15px;background: #73AD21;padding: 20px;width: 200px;height: 150px;
}
椭圆边框 : border-radius: 15px/50px
#rcorners8 {border-radius: 15px/50px;background: #73AD21;padding: 20px;width: 200px;height: 150px;}
椭圆边框 : border-radius: 50%
#rcorners9 {border-radius: 50%;background: #73AD21;padding: 20px;width: 200px;height: 150px;}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>项目</title><style>#rcorners7 {border-radius: 50px/15px;background: #73AD21;padding: 20px;width: 200px;height: 150px;}#rcorners8 {border-radius: 15px/50px;background: #73AD21;padding: 20px;width: 200px;height: 150px;}#rcorners9 {border-radius: 50%;background: #73AD21;padding: 20px;width: 200px;height: 150px;}
</style>
</head>
<body><p>椭圆边框 - border-radius: 50px/15px:</p><p id="rcorners7"></p><p>椭圆边框 - border-radius: 15px/50px:</p><p id="rcorners8"></p><p>椭圆边框 - border-radius: 50%:</p><p id="rcorners9"></p>--></body>
</html>
三、总结
1、本文主要讲解了CSS3圆角,通过一些属性的演示,丰富的案例,帮助大家理解CSS知识。希望大家可以耐心的去学习,同时希望碰到问题主动搜索,尝试一下,总会有解决方法。
2、代码很简单,希望能帮到你。
想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/ 想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/
一篇文章带你了解CSS3圆角知识相关推荐
- button按钮样式_一篇文章带你了解CSS3按钮知识
在实际开发中,按钮的应用是必不可少.使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式. 一.平面样式CSS按钮 平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势 ...
- css3 下边框缓缓划过_一篇文章带你了解CSS3按钮知识
在实际开发中,按钮的应用是必不可少.使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式. 一.平面样式CSS按钮 平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势 ...
- css 科技 边框_一篇文章带你学习CSS3图片边框
这篇文章我们来讲一下在网站建设中,一篇文章带你学习CSS3图片边框.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 使用CSS3 border-image 属性,你可以在元素 ...
- 一篇文章带你快速理解JVM运行时数据区 、程序计数器详解 (手画详图)值得收藏!!!
受多种情况的影响,又开始看JVM 方面的知识. 1.Java 实在过于内卷,没法不往深了学. 2.面试题问的多,被迫学习. 3.纯粹的好奇. 很喜欢一句话:"八小时内谋生活,八小时外谋发展. ...
- 乐鑫esp8266学习rtos3.0笔记第3篇: 一篇文章带你搞掂存储技术 NVS 的认识和使用,如何利用NVS保存整型、字符串、数组以及结构体。(附带demo)
本系列博客学习由非官方人员 半颗心脏 潜心所力所写,不做开发板.仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 1. Esp8266之 搭建开发环境,开始一个" ...
- 如何使用RSA 对数据加解密和签名验签?一篇文章带你搞定
点击上方"Python爬虫与数据挖掘",进行关注 回复"书籍"即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 三分割据纡筹策,万古云霄一羽毛. ...
- 一篇文章带你了解大数据生态圈---大数据组件图谱
小编一篇文章带你了解大数据生态圈-大数据组件图谱 转载地址:http://blog.csdn.net/u010039929/article/details/70157376 文章目录 小编一篇文章带你 ...
- java ee 值范围_一篇文章带你读懂: Java EE
原标题:一篇文章带你读懂: Java EE 点击上图,查看教学大纲 何为 Java EE Java EE是一个标准中间件体系结构 不要被名称"Java PlatformEnterprise ...
- 一篇文章带你入门adb自动化测试
一篇文章带你入门adb自动化测试 前言 一.什么是adb 1.adb的原理的应用场景 2.(adb)Android debug bridge用于调试使用安卓系统的设备 3.adb基本原理 二.adb环 ...
最新文章
- 打印机打印一次出三张_一次性帮你搞定3D打印机堵塞问题
- IT人的眼睛就是一把尺!
- Oracle Data Guard 主库 归档文件 删除策略 .
- c++大作业迷宫游戏 规定时间内完成_小学生做作业磨蹭的7个原因及对策!太准了~...
- key map 模糊查找_lua脚本语言批量删除模糊查询的key
- HashMap是如何工作的
- 数据特征分析-帕累托分析
- Ext.Ajax.request
- android checkbox 选中事件_挖穿Android第四十九天
- Itunes恢复备份失败解决办法(C盘空间不足)
- 第八届中国智慧城市建设技术研讨会总体日程安排
- 【懒人必备神器】教你用Python做一个自动抽奖程序啦~
- iPhone苹果手机尺寸大小
- radio默认选中并显示相应信息 php,php selectradio和checkbox默认选择的实现方法详解...
- MAC系统下安装homebrew(2020.04)
- 服务网格——什么是服务网格?(概念原理1)
- 面试:自我问题反思总结
- 库文件搜索路径及GCC搜索路径总结
- 关于网站中图片排名优化的技巧是?
- 我学习Android的一些套路
热门文章
- 使用增强的图像多分类模型
- 俄罗斯研究人员表示可访问全球所有小米宠物喂食器
- 【数值预测案例】(7) CNN-LSTM 混合神经网络气温预测,附TensorFlow完整代码
- Pixhawk(APM固件) ArduPilot的遥控器读取及油门转换
- html div 参数,DIV CSS参数大全
- Unity类似手机通知栏的滑动效果
- Android 音乐播放器制作(带有通知栏、Widget小挂件)
- C++实例化对象数组
- 【CVPR2020】何恺明团队最新力作RegNet:超越EfficientNet
- kubelet 配置节点资源预留