边框的巧妙应用

边框有一些特殊的属性,可以采用边框来实现对话框的效果,而且兼容性杠杠的,不过在ie6下面可能会遇到兼容性问题,在后面分析它。

首先,我们看看边框的组成结构:

    <div style="width:20px;height:20px;border-width:10px; border-style: solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div>

效果图:

可以看到边框的效果,4个等腰梯形。我们设置的各个方向边框高度就是每个等腰梯形的高。

可以想象得到,如果div的高度和宽度都为0,那么这4个等腰梯形会变成等腰直角三角形;

如果分别设置每个方向边框高度,则变成一般三角形。

利用这个性质,我们可以再html上显示特殊字符▲▼△▽。

 .t-box{height:100px;line-height: 100px;background: #F3961C;position: relative;color: #000000; }
 .t-bd1{width:0;height:0;border-width:30px; border-style: solid; border-color:#F3961C transparent transparent ;_border-color:#F3961C #fff #fff;position: absolute;left:100px;top:100px; }
<div class="t-box">
        边框法生成技术
        <div class="t-bd1"></div>
</div>

  效果:

前文提到了ie6的兼容性问题,我们在 .t-bd1中使用了ie6的属性值hack,将solid边框的背景色设置为环境色,否则在ie6下边框颜色设置为transparent的部分呈现黑色。

网络上有一篇文章提到在ie6下给需要透明色的边框设置border-style: dashed可以实现相同的目的,但是我的实验效果不是很理想。

实例二:

.t-bd2{width:0;height:0;border-width:20px; border-style: solid; border-color:#F3961C #F3961C transparent transparent ;position: absolute;left:100px;top:100px; }
<div class="t-box">
        边框法生成技术
        <div class="t-bd2"></div>
</div>

效果:

技巧在于border-color:#F3961C #F3961C transparent transparent ;

也可以利用该技巧实现复杂的呈现,主要是两个div之间的相互覆盖:

.t-bd3{width:0;height:0;border-width:15px 25px; border-style: solid; border-color:transparent #F3961C #F3961C transparent ;position: absolute;left:-50px;top:50px; }
.t-bd4{width:0;height:0;border-width:10px 25px; border-style: dashed solid solid dashed; border-color:transparent #fff #fff transparent ;position: absolute;left:-50px;top:60px; }
<div class="t-box" style="margin-left:100px;width:400px;">
        边框法生成技术
        <div class="t-bd3"></div>
        <div class="t-bd4"></div>
</div>

效果:

另一个实例:

.t-bd5{width:0;height:0;border-width:17px 10px; border-style: solid; border-color:#F3961C transparent transparent;position: absolute;left:50px;top:100px;z-index:1; }
.t-bd6{width:0;height:0;border-width:20px 15px; border-style: solid; border-color:#beceeb transparent transparent;position: absolute;left:45px;top:105px;z-index:0; }
<div class="t-box" style="border: 5px solid #beceeb;">
        边框法生成技术
        <div class="t-bd5"></div>
        <div class="t-bd6"></div>
</div>

效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏marsggbo

响应式布局简说

简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上,屏幕比较宽,就可以一行放2个Div。 到了手机上,或者Pad竖着拿的的时候,一行就...

22860
来自专栏小筱月

分享一次纯 css 瀑布流 和 js 瀑布流

现在百度图片,360 图片搜索,都是以一种瀑布流的形式展示,那么接下来,分享一波纯 css 瀑布流 和 js 瀑布流

36040
来自专栏菜鸟前端工程师

html+css学习笔记010-垂直对齐0指针0透明

12520
来自专栏互联网杂技

box布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>...

28470
来自专栏Python攻城狮

HTML 5&CSS快速入门1.计算机中的文件2.网页组成4.HTML基础操作

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

43530
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(四)边框图片,过渡

并且,添加边框图片是以背景的方式添加的,所以会有可能文字覆盖在边框的情况,后面也会介绍处理方法。

7010
来自专栏前端小叙

绝对定位多个字居中显示的css

在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定...

28890
来自专栏三十课

【基础】这15种CSS居中的方式,你都用过哪几种?

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有...

43670
来自专栏企鹅号快讯

Web前端:浅析“HTML+CSS的基本应用”

Hyper Text Markup Language,简称HTML,超文本标记语言,因页面中可以包含图片、链接、音乐、程序等非文本元素,所以称为超文本。 ? H...

252100
来自专栏用户2442861的专栏

关于Div的宽度与高度的100%设定

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度...

10520

扫码关注云+社区

领取腾讯云代金券