CSS Border高級应用案例共享(3角等样子)

日期:2020-10-25 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

基本原理

css盒实体模型

1个盒子包含: margin+border+padding+content
– 左右上下边框交界处处出展现光滑的斜线. 运用这个特性, 根据设定不一样的左右上下边框宽度或色调能够获得小3角, 小梯形等.
– 调剂宽度尺寸能够调整3角形样子.

示例1

1般状况下, 大家设定盒子的宽高宽比, 及左右上下边框, 会展现以下图

#test1 {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

示例2

在上面基本上, 大家把宽高宽比都设为0时, 会展现上述的界限斜线.

#test2 {
    height:0;
    width:0;
    overflow: hidden; /* 这里设定overflow, font-size, line-height */
    font-size: 0;     /*是由于, 尽管宽高宽比为0, 但在IE6下会具备默认设置的 */
    line-height: 0;  /* 字体样式尺寸和行高, 致使盒子展现被撑开的长矩形框 */
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

这时候, 实际上大家早已看到有左右上下4个3角形了..假如, 大家把4种色调, 只保存1种色调, 余下3种色调设定为全透明(或设定为和情况色同样的色调), 那不就出現1个小3角了么

示例3

只保存上面的橙色, 看看

#test3 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
}

但是, IE6下不适用全透明啊~~~, 会出現下图的模样

寻找1个在IE6下边框全透明的文章内容中寻找处理方法, 以下例

示例4

IE6下, 设定余下3条边的border-style为dashed,,,便可做到全透明的实际效果~ 实际缘故能够见参照材料3

#test4 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid dashed dashed dashed;
    border-width:20px;
}

自然, 在IE6下, 不设定全透明, 将其色调设定为情况色, 使其看不出来也是能够的.

示例5

上面大家画的小3角的斜边全是借助原先盒子的边, 也有此外1种方式的小3角, 便是斜边在盒子的对角网上

#test5 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 #3366ff transparent transparent;
    border-style:solid solid dashed dashed;
    border-width:40px 40px 0 0 ;
}

保存在其中1种色调, 便可以获得斜边在对角网上的3角形了…好几个这样的3角形, 根据设定边框尺寸, 色调, 拼凑起来能够产生随意样子的3角形.

像这类不规律的3角形, 拓宽1下, 放在气泡框上, 便可以省去拼情况照片的不便了.

此外, 有关气泡框, 可使用棱形标识符(◆)来完成, 设定其font-size, 色调和情况色1致, 精准定位可使用margin负值和absolute肯定精准定位来完成, 见示例.

运用之圆角转化成

应当说是近似圆角,,实际上由1个高宽比十分小的梯形展现出来
- 上梯形(无尚边框,下上下3px宽度, 上下色调去掉)+矩形框+下梯形

自融入圆角1:
- 全部rc设定为float: left 或 display: inline-block 分成top,bd,bottom, top中又有两个层rc1和rc2, rc1只设定border-top, 高宽比为0, 并设定上下margin呈短小的1横线, rc2只设定上下border而且上下margin小于rc1, height为1px, 正中间bd设定上下border,不设定上下margin;
- 但是 IE 6&7 出現 bug:rc在IE6中仍然显示信息为dispaly:block,而IE7中top 和 bottom缩成1坨,不愿拓展起来,而在rc1/rc2/rc3 中插进文本xxx后只能拓展到文本宽度,不可以与bd对齐.
- 见自融入圆角1
自融入圆角2
- 自 Google 系商品的 1px 圆角按钮,,,3层div, 最外层div1一切正常设定边框宽度1px, 展现出左右边框线, 正中间div2只设定上下边框, 且把上下margin设定成负值, 展现出圆角处的4个圆点 里层div3一样只设定上下边框, 另外margin左右空出div2的高宽比, margin上下也设定与div2同样的负值.
- 见自融入圆角2

别的小难题

- 全透明:
IE6访问器不适用transparent全透明特性,就border转化成3角技术性而言,立即设定对应的全透明边框的border-style特性为dotted或是dashed便可处理这1难题,缘故是在IE6下, 点线与虚线均以边框宽度为标准,点线长度务必是其宽度的3倍以上(height>=border-width*3),虚线宽长度务必是其宽度的5倍以上(height>=border-width*5),不然点线和虚线都不容易出現.
- IE6的奇偶数bug:
假如精准定位外框高宽比或是宽度为单数,则IE6下,肯定精准定位元素的低精准定位和右精准定位会有1像素的偏差.因此,尽可能确保外框的高宽比或宽度为偶标值.
- IE6的空div高宽比bug:
IE6下,空div会有莫名的高宽比,也便是说height:0;不管用,此时产生的尖角的具体占高于别的访问器是有差别的.可以使用font-size:0; + overflow:hidden;修补此难题.
- filter: chroma滤镜
该特性特性能够设定1个目标中特定的色调为全透明色, 如:
border-color: pink;
filter: chroma(color=pink);