css中的有趣的border

开发 前端
CSS 中的 border 属性,我想凡是了解一点 CSS 的都知道它是作用,可以在 MDN 上找到对它的详细介绍。简单来说,就是我们常用的边框,一个非常基础的用法,当然还可以定义很多奇形怪状的边框类型,比如圆角(radius,可能兼容性不是很好),椭圆(其实只要懂了椭圆,边框就可以随意绘制了)。

[[174058]]

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

border

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

  1. border: 1px solid black; 
  2. // 等价于 
  3. border-width: 1px; 
  4. border-style: solid; 
  5. border-color: black;  

下面是演示的效果:

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

  1. border 1px solid black; 
  2.  
  3. border-radius: 50%; 

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

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

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

  1. border: 20px solid gray; 

并且,边框是可以单独设置 top,right,bottom,left 的值:

  1. border: 20px solid gray; 
  2.  
  3. border-top-width: 40px; 
  4.  
  5. border-left-width: 40px;  

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

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

  1. border: 20px solid; 
  2.  
  3. border-top-color: black; 
  4.  
  5. border-right-color: red; 
  6.  
  7. border-bottom-color: gray; 
  8.  
  9. border-left-color: blue; 

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

  1. width: 0; 
  2.  
  3. height: 0; 
  4.  
  5. border-radius: 50%; 

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

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

用 border 实现箭头

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

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

  1. border-width: 15px 0px 15px 30px; 
  2.  
  3. border-color: black gray; 
  4.  
  5. border-style: solid; 

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

  1. border-color: transparent gray; 

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

 总结

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

参考

CSS Refreshers: Borders

欢迎来我的博客交流。

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2010-09-06 16:00:41

CSSborder

2010-09-08 14:46:36

CSSborder

2010-08-25 14:11:01

CSSborder-top

2023-03-13 08:47:06

CSS数学函数

2022-03-30 09:01:37

CSS属性函数

2010-08-25 16:03:26

CSSborder

2010-08-27 10:04:33

borderclearCSS

2010-08-26 10:33:27

CSSborder

2022-06-16 08:35:10

CSS属性前端

2010-08-25 14:01:29

CSSborder-righ

2010-09-10 09:42:37

borderclearCSS

2010-08-25 13:18:53

border-collCSS

2016-12-05 15:15:52

JavaScriptCSS库

2023-11-08 10:12:40

架构函数元素

2021-09-30 22:52:30

人工智能机器人技术

2021-09-29 23:05:32

人工智能机器人技术

2019-11-25 14:24:24

机器学习算法数据

2010-08-16 10:18:53

DivCSS

2019-12-03 19:09:19

JavaScriptNumbers阿里云计算

2009-08-25 14:25:19

Eclipse 3.5
点赞
收藏

51CTO技术栈公众号