border 与三角形

border,无处不在,针对三角形作个备忘。

1. 在设置了 border-style 和正的 border-width 但没设置 border-color 的情况下,border 的颜色是跟随字体颜色来的。
2. background 的覆盖范围是包括 border 的,所以在 border 的颜色是透明时,将显示 background。

紧跟着的图片的页面来源是 JS Bin 上的一个 demo

border 是包成一个矩形的,如下图左上。但单个 border 是如何的呢,可以看下图右上,可以看到对于交接处是采用对分的形式的。由于 background 的作用范围,所以左下图把右 border 设为透明后,显示出黑色的背景来。右下,在把 background 也设为透明后,border 处显示出更下方的内容了。

继续阅读“border 与三角形”

CSS Regions

CSS Regions 的提案很早就有了,前端观察 也在 2011 年的时候就译了 CSS3 Region:基于HTML和CSS3的富页面布局 一文,但我首次听说还是苹果的 WWDC 2013 大会。

CSS Regions 目前依然是草案,变化可能还会很大。从目前的状态来看,和前端观察 2011 年那篇译文的写法已经有了很大的变化了。

CSS Regions 的主要目的是把一段文档进行更加丰富的排版,如分块、分栏和中有间隔等。

常规的分块展示内容看不出为何需要新工具。但如果需要对一段内容进行如下图那样的布局的话,问题就来了。需要计算每块能容乃的字数有多少,然后截字输出到对应模块。但还是存在着问题,对于现在的响应式布局又该如何动态调整?遇到图片呢?

继续阅读“CSS Regions”