论坛 › 欢乐水吧 › CSS3圆角边框初探

马黑黑 发表于 2021-12-22 08:47

CSS3圆角边框初探

本帖最后由 马黑黑 于 2021-12-22 09:07 编辑

CSS的作用是控制网页的样式和布局。作为坛民，我们应该知道 CSS3 是最新的 CSS 标准，而像圆角边框那样的“特效”就是 CSS3 才开始拥有的渲染特性。CSS3 已被广泛支持，但凡不是古董级版本的浏览器，几乎都完全支持 CSS3 的所有新特性，IE 对 CSS3 的支持度最差（微软已经抛弃了IE）。

在 CSS3 出来以前，人们需要用图片来实现网页元素的圆角边框，一个可视的网页元素（比如 div）被分割成上中下三部分，上下要各按左右来布局圆角，非常繁琐。在 CSS3 里，这一切都变得异常简单，只需一个属性命令：

border-radius

border 是“边框”，radius 是“半径”。border-radius 是 CSS3 向 div 之类的盒子元素添加圆角边框的属性命令，它是一个缩写，通用于所有的四个方向，如果需要指定特定的某个（些）方向，可写为：

border-top-radius
border-top-right-radius

但要注意，当使用 border-*-radius 定义圆角边框时，如果某个方向值被省略，则按 top=bottom 和 left=right 的原则自动补充。因此，如果需要不同的定义，每个方向值都应当声明。

【语法】

① border-radius:值
② border-radius:值1 值2 值3 值4

【应用】

① style="border-radius:25px;"
② style="border-radius:25px 20px 15px 10px;"

【说明】

① border-radius 只跟一个值，表示四个方向的圆角半径值都一样
② border-radius 跟四个值，表示构成圆角边框的四个方向的圆角半径值各自定义，按上右下左的顺序
③ 当只跟两个值，则 上=下，左=右
④ 另外，如前所述，还可以用 border-*-radius 这样的表达结构逐一定义四个方向的半径值
⑤ 半径值的单位可以是 px、em，也可以是百分比
⑥ 调整各个方向的半径值，会得出神奇的效果

【实例】

<div style="margin:4px auto;width:200px;height:200px; border:solid 1px #ffcc00; background:#fff; border-radius:40px;">
这里是子元素内容
</div>

效果见楼下——

马黑黑 发表于 2021-12-22 08:47

本帖最后由 马黑黑 于 2021-12-22 09:07 编辑 <br /><br /><div style="margin:4px auto;width:400px;height:200px; border:solid 1px #ffcc00; background:#fff; border-radius:40px;">
<pre>       
        核心代码：border-radius:40px
       
        边框定义：border:solid 1px #ffcc00
        （solid 表示实线表框）
       
</pre>
</div>

马黑黑 发表于 2021-12-22 08:47

本帖最后由 马黑黑 于 2021-12-22 09:37 编辑 <br /><br /><div style="margin:10px auto;border:solid 1px #ff00aa;border-radius: 10px 50px 50px 30px;width:80%;">

<pre>   


      核心代码：border-radius: 10px 50px 50px 30px

                上10 右50 下50 左30

</pre>

</div>

马黑黑 发表于 2021-12-22 08:47

本帖最后由 马黑黑 于 2021-12-22 09:44 编辑 <br /><br /><p>弄个圆形的吧：<br>&nbsp;</p>
<p>既然是圆形的，那么，盒子得是正方形的，所以设定了高宽一样的尺寸。核心代码：border-radius:50%，即半径是矩形边长的一半。</p>

<div style="margin:20px auto;width:400px;height:400px;border:solid 2px #ff0000;border-radius:50%;"></div>

红影 发表于 2021-12-22 09:19

对这里的的上下左右不太理解，圆角的展示，眼睛能看到的是针对4个方向的45度顶角，那么上到底指的什么？是包含了这条边的左右方向了吧。

红影 发表于 2021-12-22 09:21

边询问边学习，黑黑又出新教程，太好了{:4_199:}

马黑黑 发表于 2021-12-22 09:50

红影 发表于 2021-12-22 09:19
对这里的的上下左右不太理解，圆角的展示，眼睛能看到的是针对4个方向的45度顶角，那么上到底指的什么？是 ...

上就是上边距，其余类推，以它的长度为基准，结合用户给出的半径值来计算弧度从而得出圆角的样式。

比如影响左上角的弧度，依据的是用户定义的上半径、左半径并结合两个边距长度，经系统自行计算得出圆角效果。

红影 发表于 2021-12-22 10:45

马黑黑 发表于 2021-12-22 09:50
上就是上边距，其余类推，以它的长度为基准，结合用户给出的半径值来计算弧度从而得出圆角的样式。

比 ...

明白了，也就是说，比如用我的签名去试验，想要上边半圆，下面完全平的，应该做不到。
但是上面倒个角是能做到的，只设置TOP方向，其他3个方向为0，就是行了。

马黑黑 发表于 2021-12-22 10:49

红影 发表于 2021-12-22 10:45
明白了，也就是说，比如用我的签名去试验，想要上边半圆，下面完全平的，应该做不到。
但是上面倒个角是 ...

都可以做到。四个方向值，设部分为0试试

红影 发表于 2021-12-22 12:13

马黑黑 发表于 2021-12-22 10:49
都可以做到。四个方向值，设部分为0试试

嗯嗯，等空了我试试。这些试验都能直接看到效果，还是很有趣的{:4_173:}

马黑黑 发表于 2021-12-22 13:14

红影 发表于 2021-12-22 12:13
嗯嗯，等空了我试试。这些试验都能直接看到效果，还是很有趣的

预祝成功

红影 发表于 2021-12-22 14:16

<div style="margin:0px auto;width:272px; height:449px;">
<img alt="试验" style="position:relative;top:100px;left:0px;width:272px; height:449px;border-radius:126px 126px 1px 1px;" src="https://www.huachaowang.com/data/attachment/forum/201711/19/142453t7u7xx5hz85lpdud.jpg">
</div>

红影 发表于 2021-12-22 14:32

试了才知道，原来默认的是西北、东北、东南、西南的四个角。
还以为是把倒角左边和上面各分一半呢。

马黑黑 发表于 2021-12-22 16:28

红影 发表于 2021-12-22 14:32
试了才知道，原来默认的是西北、东北、东南、西南的四个角。
还以为是把倒角左边和上面各分一半呢。

对。左、上影响西北，上右影响东北，以此类推

小辣椒 发表于 2021-12-22 17:06

黑黑，这个边框可以做我们平时在玩的音乐帖，晚上我试一下，这个会了就不用自己做边框了，太好了，黑黑每天都有惊喜给大家。{:4_178:}

马黑黑 发表于 2021-12-22 17:08

小辣椒 发表于 2021-12-22 17:06
黑黑，这个边框可以做我们平时在玩的音乐帖，晚上我试一下，这个会了就不用自己做边框了，太好了，黑黑每天 ...

每天不可能，有空有心情可以多介绍一些 CSS3 的特性

小辣椒 发表于 2021-12-22 17:16

你今天我已经看见3个了{:4_178:}

马黑黑 发表于 2021-12-22 17:18

小辣椒 发表于 2021-12-22 17:16
你今天我已经看见3个了

这些我都会慢慢介绍的，你们有权限可以直接看代码，自己分析一下也可

小辣椒 发表于 2021-12-22 17:23

马黑黑 发表于 2021-12-22 17:18
这些我都会慢慢介绍的，你们有权限可以直接看代码，自己分析一下也可

好的，黑黑辛苦，我准备下下班了

马黑黑 发表于 2021-12-22 18:21

小辣椒 发表于 2021-12-22 17:23
好的，黑黑辛苦，我准备下下班了

OK

查看完整版本: CSS3圆角边框初探