css中的有趣的 border

wendux 发布于2019-08-01 15:50 / 679人阅读

摘要：中的属性，我想凡是了解一点的都知道它是作用，可以在上找到对它的详细介绍。看了这么多有意思的，那么对于边框，你真的了解了吗最近碰到一个有意思的样式，让我对于边框有了很深刻的了解。

CSS 中的 border 属性，我想凡是了解一点 CSS 的都知道它是作用，可以在 MDN 上找到对它的详细介绍。

border

简单来说，就是我们常用的边框，一个非常基础的用法，就是

border: 1px solid black;
// 等价于
border-width: 1px;
border-style: solid;
border-color: black;

下面是演示的效果：

当然还可以定义很多奇形怪状的边框类型，比如圆角(radius，可能兼容性不是很好)，椭圆(其实只要懂了椭圆，边框就可以随意绘制了)。

border 1px solid black;
border-radius: 50%;

border-top,-right,-bottom,-left

看了这么多有意思的 DEMO，那么对于边框，你真的了解了吗？

最近碰到一个有意思的 CSS 样式，让我对于边框有了很深刻的了解。平时我们用边框，基本都要给边框一个宽度，1px，偶尔2px，并没有发现边框与元素之间的关系，当我们把 border-width换大一点的值，问题就来了。

border: 20px solid gray;

并且，边框是可以多带带设置 top，right，bottom，left 的值：

border: 20px solid gray;
border-top-width: 40px;
border-left-width: 40px;

边框与边框的交界处该如何来判断呢？

了解这一点非常重要，如果你也发现了这个问题，那么下面有意思的东西就来了：

border: 20px solid;
border-top-color: black;
border-right-color: red;
border-bottom-color: gray;
border-left-color: blue;

居然是内顶点与外顶点的连线把边框分开了，如果把元素的 width 和 height 都设置成 0，再加一个 radius：

width: 0;
height: 0;
border-radius: 50%;

前面 border-radius 的原理你也应该懂了吧!

有关于 border-radius 的选取，可以看下 SF 上的这个提问 border-radius内外半径=<边框宽度时，盒子内边就成了直角怎么一回事。

用 border 实现箭头

知道了一些 border 的基本知识，我们就可以实现常见于对话框的箭头，像下面这种：

这个需要借助于 CSS 中的透明 transparent 来实现，比如我们需要一个向右的箭头，参考上面 width 和 height 为 0 时的例子，对应的边框大小 15px,0px,15px,30px，先看下面这个例子

border-width: 15px 0px 15px 30px;
border-color: black gray;
border-style: solid;

这个时候需要把 border-top 和 border-bottom 的颜色设置成透明，

border-color: transparent gray;

那么，对于的其他三个角度的箭头也可以以同样的方式设计出来：

总结

看了这篇文章，是不是觉得 border 的功能非常强大，其实我们常见的一些气泡和形状都可以用 border 来实现，哈哈，非常鄙视那些用图片的同学。共勉。

参考

CSS Refreshers: Borders

欢迎来我的博客交流。

云服务器服务器托管有趣的事有趣的python 有趣的数据展示 linux有趣的命令

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50146.html

css中的有趣的 border

摘要：中的属性，我想凡是了解一点的都知道它是作用，可以在上找到对它的详细介绍。看了这么多有意思的，那么对于边框，你真的了解了吗最近碰到一个有意思的样式，让我对于边框有了很深刻的了解。 CSS 中的 border 属性，我想凡是了解一点 CSS 的都知道它是作用，可以在 MDN 上找到对它的详细介绍。 border 简单来说，就是我们常用的边框，一个非常基础的用法，就是 border: 1px...

FingerLiu 2019-08-29 11:27 评论0 收藏0
浅谈CSS3 box-sizing 属性有趣的盒模型

摘要：盒模型的组成大家肯定都懂，由里向外盒模型是有两种标准的，一个是标准模型，一个是模型。指定元素的宽度和高度最小最大属性适用于的宽度和高度。盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有两种标准的，一个是标准模型，一个是IE模型。从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型...

K_B_Z 2019-04-23 11:41 评论0 收藏0
有趣的CSS弹跳动画

摘要：举一反三，我们也可以把角度反转，就会往另外一边弹跳。如果我们把动画里头添加，就会变成线性的连续方式喔。这是只用了一个div来做的小动画，纯粹利用CSS3的animation来完成，就像是一个正方形在地上弹跳，碰到地面的时候尖角还会压缩变圆，阴影的部分也会随着正方形升高而缩小，至于到底该怎么完成呢？让我们继续看下去。利用伪元素由于只使用了一个div，要同时达到正方形旋转与阴影缩放的...

alaege 2019-08-02 16:16 评论0 收藏0
有趣的CSS弹跳动画

摘要：举一反三，我们也可以把角度反转，就会往另外一边弹跳。如果我们把动画里头添加，就会变成线性的连续方式喔。这是只用了一个div来做的小动画，纯粹利用CSS3的animation来完成，就像是一个正方形在地上弹跳，碰到地面的时候尖角还会压缩变圆，阴影的部分也会随着正方形升高而缩小，至于到底该怎么完成呢？让我们继续看下去。利用伪元素由于只使用了一个div，要同时达到正方形旋转与阴影缩放的...

edgardeng 2019-08-29 18:46 评论0 收藏0
有趣的 box-decoration-break

摘要：可选取值只有两个默认取值换行示例这个属性通常作用于内联元素。这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break。下面就一起去一探究竟。因为 MDN 上关于这个属性，没有中文文档，所以一直在想一个合理贴切的中文翻译。直译一下： box -- 盒，可以理解为元素盒模型 decoration -- 装饰，理解为元素样式 break -- 断行，参考...

cooxer 2019-08-30 15:56 评论0 收藏0