CSS3实例教程:边框特性border的极致运用

2021-03-15 09:08 jianzhan

这里探讨的全是有关边框特性border的极致运用,这些运用虽然一些剑走偏门,但在1些独特的场所,将会還是会用得上的,假如你对HTML编码有洁癖,有切肤之痛,而且觉得冗余的标识危害到你的视觉效果神经系统,那末你能够权当1种业余赏析。
作者:冰极峰
blog详细地址:http://www.cnblogs.com/binyong
这全球太瘋狂,Border特性也搞效仿秀!
这里探讨的全是有关边框特性border的极致运用,这些运用虽然一些剑走偏门,但在1些独特的场所,将会還是会用得上的,假如你对HTML编码有洁癖,有切肤之痛,而且觉得冗余的标识危害到你的视觉效果神经系统,那末你能够权当1种业余赏析。
下面这个截图是border特性的几种基础转变,根据对这几种基础转变的拓宽引入,你能够转变出各种各样丰富多彩的实例出来:

图1
如我在另外一篇文章内容《用div css仿真模拟报表对角线》中说到的1样,这些转变实际上便是根据以下的基础基本原理:
border-left:20px transparent dotted;
border-top:20px green solid;
border-right:20px transparent dotted;
border-bottom:20px orange solid;
width:0px;
height:0px;
overflow:hidden;

留意:transparent是用来全透明的,而且要设定的线条的款式为dotted(点线)。宽高为0,就会只显示信息边框一部分,随后用overflow来将过剩一部分截取掉,剩余的便是斜角內容了。
斜角的组成规律性以下:
    border-left和border-top构成从左上到右下的斜线 border-right和border-top构成从右上到左下的斜线 border-right和border-bottom构成从右下到左上的斜线 border-left和border-bottom构成从左下到右上的斜线

有了这些基础规律性便可以转变无限了,充分发挥你的想象力吧,大家看来看一些甚么转变。
下图是运用这类基本原理转变出来的不规律选项卡,以便简少编码量,我沒有再加js作用,你们能够自身试试。
PS:这些连接所有有滚翻情况,你可立即应用,早已做了适配性检测。

图2
上1页12 下1页 阅读文章全文