边框的巧妙应用

边框有一些特殊的属性,可以采用边框来实现对话框的效果,而且兼容性杠杠的,不过在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>

效果:

  

时间: 2024-10-12 09:25:32

边框的巧妙应用的相关文章

巧妙实现带圆角的渐变边框

如何实现下面这个渐变的边框效果: 这个问题本身不难,实现的方法也有一些,主要是有一些细节需要注意. border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值. 顾名思义,我们可以给 border 元素添加 image,类似于 background-image,可以是图片也可以是渐变,不再局限于纯色. 使用 bo

div背景透明内容不透明与0.5PX边框兼容设置

1.问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端.  兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px.不同浏览器效果额不同  解决方案:设置2层嵌套的div,最外层的用来定位,保障我们设置的内容不会脱离原先的文档流.   里层设置两个div,一个用来书写内容,一个用来专门设置边框 HTML代码 : <!-- position_box用来定位,控制该区域在原文档流中的位置 --> <div class="po

用label标签解决IE下input按钮点击或者submit按钮的黑边框

如果我们把input的type设置为submit,是的,提交表单经常需要submit按钮,就像下面这样: .代码 <inputtype="submit"class="button"value="登录"/> 你会发现submit初始状态就是这种焦点获取的黑框样式:精心开发5年的UI前端框架! 怎么办?如果设置border:none,也就是说不要border,那么这种黑框就没 有了,所以有种解决办法是直接把框写死到背景上,然后去除bord

如何使用CSS创建巧妙的动画提示框

原文:https://webdesign.tutsplus.co...原作:Jase Smith翻译:Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时,亦或是当他们在点击了按钮之后需要确认自己没点错时,又或是带图片和字幕的复活节彩蛋,提示框是用来增强用户界面的绝佳手段.现在,让我们来做几个动画提示框,没有别的,只有HTML和CSS. 样例 这是我们之后要做的: http://jsfiddle.net/kcschaefe... 在我们沉浸在写代码的过程中之前,让我们先来看看我们的意

PYQT设计无边框窗体

#UI.py,通过UI设计师制作后直接转换为UI.py脚本 # -*- coding: utf-8 -*-from PyQt4 import QtCore, QtGui try:    _fromUtf8 = QtCore.QString.fromUtf8except AttributeError:    _fromUtf8 = lambda s: s class Ui_Form(object):    def setupUi(self, Form):        Form.setObject

html中去掉文本框(input type=&quot;text&quot;)的边框或只显示下边框

去掉: <input   type="text"   name="textfield"   style="border:0px;">只留下边框: <input type="text" style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: solid&

jQuery - 点击图片加边框

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>为图片添加边框</title> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <scrip

css3动画--边框线条动画

网上看到一个css3动画,地址 最开始思路是,里面一个DIV方块,右上角一个同样大小的div1,向上,向右平移8px,设div1的border-top,border-right值形成,如图所示 再用clip截取一半,形成半折角. 同理左下角建一个div,向左.向下平移8px,设border-left,border-bottom值,用clip截取形成 <div class="cont"> <div class="bb"></div>

去除Bootstrap输入框聚焦时的边框轮廓线

使用Bootstrap3的时候,好处是有很多现有的控件可以使用,坏处是个性化起来会遇到不少麻烦, 单独的静态页面显示正常的, 引入Bootstrap后,有些类/通用界面组件的样式会被覆盖. 想去除默认风格或定制input输入框的边框风格,可以使用如下代码: input:focus { outline: none; border-color: #cfdc00; box-shadow: 0 0 5px rgba(207, 220, 0, 0.4); border-radius: 5px; } 在线演