|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-5-20 08:10 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
圆角边框和图像边框是两个难啃的东西，视频中小甲鱼老师讲解的很细，一定要认真看哦。
圆角边框
圆角是 CSS3 中新增的属性，目的就是为了：提高网页性能。
CSS3 圆角只需设置一个属性：border-radius（课程一开始的 4 个是分别设置）。
鱼油为这个属性提供一个值，就能同时设置 4 个圆角的半径。
所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。
比如，下面我们有一个 div 方框：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>鱼C-45</title>
- <style>
- div {
- width: 100px;
- height: 100px;
- background-color: green;
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </html>
效果：
现在设置它的圆角半径为15px（后续直接在 style 中 div 修改）：
效果：
这条语句同时将每个圆角的"水平半径"（horizontal radius）和"垂直半径"（vertical radius）都设置为 15px。
水平/垂直半径就是这样子：
border-radius 可以同时设置 1 到 4 个值。
规律和上一讲 border-radius 略有不同：
- 设置 1 个值，表示 4 个圆角都使用这个值
- 设置 2 个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值
- 设置 3 个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值
- 设置 4 个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。
拿 3 个值举例子：
- border-radius: 15px 5px 25px;
效果：
左上角为 15px，右上和左下为 5px，右下角为 25px 。
如果设置为 0 px，就是默认的直角了。
border-radius 还可以用斜杠设置第二组值。
这时，第一组值表示水平半径，第二组值表示垂直半径。
第二组值也可以同时设置 1 到 4 个值，应用规则与第一组值相同。
例如这里：
- border-radius: 15px 5px 25px / 3px 5px;
效果：
宏观来看是设置了 4 个值，左上 15px，右上 5px，右下 25px/3px，左下 5px 。
其中右下水平半径为 25px，垂直半径 3px 。
虽然各大浏览器都支持 border-radius，但是在某些细节上，实现都不一样。
当四个角的颜色、宽度、风格（实线框、虚线框等）、单位都相同时，所有浏览器的渲染结果基本一致。
一旦四个角的设置不相同，就会出现很大的差异。
比如，下面这段代码在不同的浏览器中，渲染结果就相差很大：
- border-color: blue;
- border-style: solid dashed;
- border-width: 1px 2px 3px;
- border-top-color: red;
- border-radius: 5%;
效果：
另外，并非所有浏览器，都支持将圆角半径设为一个百分比值。
因此，目前最安全的做法，就是将：
切记！
图像边框
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） |
评分
-
查看全部评分
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-5-8 07:47:09
置顶卡
千斤顶
显身卡
发表于 2020-5-8 07:48:25
发表于 2020-5-8 07:48:53
楼主
