045 - 我们是优雅生活的践行者（下）
本帖最后由 不二如是 于 2020-5-20 08:10 编辑上一集： 044 - 我们是优雅生活的践行者（上）
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
圆角边框和图像边框是两个难啃的东西，视频中小甲鱼老师讲解的很细，一定要认真看哦。
圆角边框
圆角是 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 修改）：
border-radius: 15px;
效果：
这条语句同时将每个圆角的"水平半径"（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%;
效果：
另外，并非所有浏览器，都支持将圆角半径设为一个百分比值。
因此，目前最安全的做法，就是将：
**** Hidden Message *****
切记！
图像边框
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：046 - 天行健 君子以自强不息
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） 沙发是我么？？{:10_254:} 不二是在用什么做思维导图呢 没抢到沙发{:10_266:} wuqramy 发表于 2020-5-8 07:48
不二是在用什么做思维导图呢
Mindjet MindManager weiter 发表于 2020-5-8 07:48
沙发是我么？？
是 zltzlt 发表于 2020-5-8 07:48
没抢到沙发
慢了一步{:10_329:} 不二如是 发表于 2020-5-8 07:49
Mindjet MindManager
Mindjet MindManager
MindManager（我用的）
这俩有什么区别呢 9# 10#{:10_329:} zltzlt 发表于 2020-5-8 07:48
没抢到沙发
手速论坛实锤 为什么课后作业的传送门都没有设置超链接{:9_241:} 1 {:5_90:} 谢谢 123 回复快快快~ {:10_282:} 安全为上 重点
页:
[1]
2