CSS3教程:边框属性border的极致应用

时间：2016-04-17

这里讨论的都是关于边框属性border的极致应用，这些应用虽说有些剑走偏门，但在一些特殊的场合，可能还是会用得上的，如果你对HTML代码有洁癖，有切肤之痛，并且认为冗余的标签影响到你的视觉神经，那么你可以权当一种业余欣赏。
作者：冰极峰
博客地址：http://www.cnblogs.com/binyong
这世界太疯狂，Border属性也搞模仿秀！
这里讨论的都是关于边框属性border的极致应用，这些应用虽说有些剑走偏门，但在一些特殊的场合，可能还是会用得上的，如果你对HTML代码有洁癖，有切肤之痛，并且认为冗余的标签影响到你的视觉神经，那么你可以权当一种业余欣赏。
下面这个截图是border属性的几种基本变化，通过对这几种基本变化的延伸引用，你可以变化出各种丰富的案例出来：

图一
如我在另一篇文章《用div css模拟表格对角线》中说到的一样，这些变化其实就是基于如下的基本原理：
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：这些链接全部有翻滚状态，你可直接使用，已经做了兼容性测试。

图二
#p#副标题#e#
这里讨论的都是关于边框属性border的极致应用，这些应用虽说有些剑走偏门，但在一些特殊的场合，可能还是会用得上的，如果你对HTML代码有洁癖，有切肤之痛，并且认为冗余的标签影响到你的视觉神经，那么你可以权当一种业余欣赏。
滑动块也是经常看到的，下面的截图二中模仿了一个时间滑动块功能，当然你还可以发挥的想像力，将一个滚动条也用这种方式作出来。在本图的右上角有两个相反的三角形，这种在一些需要折叠的面板中经常见，这个也是用Border模仿出来的。

图三
下面这两个东东我也不知道该将它取个什么名字，你可以叫它电话拨盘，可能现在只会在很早之前的电影中才能看了。我暂时将它取名为幸运转轮吧！：）
这种你可以将它用在登录页面中去。随你吧！！
PS：这里面的每个形状都是可以点击的，你可将它做成一个链接地址。

图四
下面这种就是一种变态的做法了，本来我想模仿成五角星，结果歪打正着，成了这么一种形状。暂时就这样吧。我数学不好，关于五边形的算法不知如何计算，望知道的朋友交流一下。

图五
兼容性测试，在以下几种浏览器中正常工作：
IE6、IE7、FF3、Opera 9.63、傲游
直接下载看吧：
运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Border属性的终极研究---看我七十二变(冰极峰:http://www.cnblogs.com/binyong)</title>

<style type="text/css">

*{margin:0;padding:0;font-size:12px;}

body{background:#555;}

#wrapper{width:500px;margin:0 auto;border-left:4px #888 solid;border-right:4px #888 solid;background:#fff;padding-bottom:50px;}

#corner{position:relative;}

#corner em,#corner b,#corner strong,#corner i,#corner span{display:block;border-top:67px green solid;border-right:67px transparent dotted;width:0;height:0;overflow:hidden;}

#corner b{border-width:65px;border-top-color:red;position:absolute;top:0;left:0;}

#corner em{border-width:63px;border-top-color:orange;position:absolute;top:0;left:0;}

#corner i{border-width:37px;border-top-color:orange;position:absolute;top:0;left:0;}

#corner strong{border-width:35px;border-top-color:red;position:absolute;top:0;left:0;}

#corner span{border-width:33px;border-top-color:#fff;position:absolute;top:0;left:0;}

#corner a{position:absolute;display:block;width:10px;height:10px;font-size:12px;color:#fff;font-weight:bold; text-decoration:none;}

#corner a#b1{left:34px;top:3px;}

#corner a#b2{left:18px;top:18px;}

#corner a#b3{left:3px;top:33px;}

h1 {width:310px;height:100px;line-height:100px;color:#2f231a;font-size:16px;margin:0px auto;position:relative;}

h1 b {color:#b2c63a;font-size:16px;font-style:normal;left:-1px;position:absolute;top:-1px;}

h1 strong{position:absolute;top:25px;left:100px;height:22px;}

/*盒子*/

.tab{width:400px;margin:0 auto;border:1px orange solid;margin-top:10px;text-align:center;}

h2{border-bottom:1px orange solid;line-height:30px;padding-left:10px;background:#FFC966;color:#7C66FF;text-align:center;}

.blog{background:#2f231a;}

.blog a:link,.blog a:visited{color:#fff;}

h3{text-align:center;line-height:26px;height:26px;}

.photobox{border-left:10px red ridge;border-top:10px green ridge;border-right:10px yellow ridge;border-bottom:10px orange ridge;}

.tab_pannel{width:380px;overflow:hidden;margin:20px auto;}

.tab_content{border:1px orange solid;height:100px;width:368px;margin:0 auto;text-align:left;}

/*基本形状----------------------------------------------------------------------------*/

.base{border:1px orange solid;padding-top:10px;width:370px;margin:0 auto;overflow:hidden;}

.base b{width:0;height:0;overflow:hidden;margin-right:20px;display:block;}

/*下三角形*/

.t1{border-left:20px #fff solid;border-top:20px green solid;border-right:20px #fff solid;border-bottom:0;}

/*左三角形*/

.t2{border-top:20px #fff solid;border-right:20px red solid;border-bottom:20px #fff solid;border-left:0;overflow:hidden;}

/*右三角形*/

.t3{border-top:20px #fff solid;border-left:20px #000 solid;border-bottom:20px #fff solid;border-right:0;}

/*上三角形*/

.t4{border-left:20px #fff solid;border-bottom:20px blue solid;border-right:20px #fff solid;border-top:0;}

/*基本形状*/

.tb_base{margin:0 auto;}

.tb_base .s1{display:block;border-left:20px red solid;border-top:20px green solid;border-right:20px yellow solid;border-bottom:20px orange solid;width:0px;height:0px;overflow:hidden;margin:0 auto;}

.tb_base .s2{display:block;border-left:10px red solid;border-top:10px green solid;border-right:10px yellow solid;border-bottom:10px orange solid;width:20px;height:20px;overflow:hidden;margin:0 auto;}

.tb_base .s3{display:block;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;margin:0 auto;}

.tb_base .s3-1{display:block;border-top:20px transparent dotted;border-left:20px green solid;border-bottom:20px transparent dotted;border-right:20px orange solid;width:0px;height:0px;overflow:hidden;margin:0 auto;}

.tb_base .s4{display:block;border-left:40px transparent dotted;border-top:40px green solid;width:0px;height:0px;overflow:hidden;}

.tb_base .s5{display:block;border-right:40px transparent dotted;border-top:40px red solid;width:0px;height:0px;overflow:hidden;}

.tb_base .s6{display:block;border-left:40px transparent dotted;border-bottom:40px #000 solid;width:0px;height:0px;overflow:hidden;}

.tb_base .s7{display:block;border-bottom:40px blue solid;border-right:40px transparent dotted;width:0px;height:0px;overflow:hidden;}

/*综合运用0*/

#menu1{list-style:none;width:380px;margin:0px auto;padding-left:5px;height:20px;}

#menu1 li{float:left;width:85px;height:20px;line-height:20px;margin-right:10px;}

#menu1 li a{position:relative;width:100%;display:block;background:green;text-decoration:none;text-align:center;color:#fff}

#menu1 li a b{position:absolute;top:20px;left:40px;border-left:5px #fff solid;border-top:5px green solid;border-right:5px #fff solid;border-bottom:0;display:none;width:0;height:0;overflow:hidden;}

#menu1 li a:hover{background:orange;}

#menu1 li a:hover b{border-top:5px orange solid;display:block;}

/*综合运用1-菱形菜单*/

p{padding:20px;}

#other li a b{top:10px;	right:20px;background:#fff;}

#menu2{list-style:none;width:368px;height:20px;position:relative;left:6px;*left:0px;}

#menu2 li{width:70px;float:left;}

#menu2 li a{display:block;width:70px;border-left:20px transparent dotted;border-top:0;text-decoration:none;color:#fff;position:absolute;}

#menu2 #m1 a{border-bottom:20px green groove;left:39px;}

#menu2 #m2 a{border-bottom:20px red groove;left:119px;}

#menu2 #m3 a{border-bottom:20px blue groove;left:199px;}

#menu2 #m4 a{border-bottom:20px orange groove;left:279px;}

#menu2 li a span{display:block;position:absolute;top:5px;left:8px;}

#menu2 li a:hover{color:#00FFFF;}/**/

#menu2 #m1 a:hover{border-bottom:20px #CC9933 groove;}

#menu2 #m2 a:hover{border-bottom:20px gray groove;}

#menu2 #m3 a:hover{border-bottom:20px #FF00FF groove;}

#menu2 #m4 a:hover{border-bottom:20px #99CC66 groove;}

/*综合运用2-菱形菜单*/

#menu3{list-style:none;width:368px;height:20px;position:relative;left:6px;*left:0;}

#menu3 li{width:90px;height::20px;line-height:20px;	float:left;	overflow:hidden;position:relative;}

#menu3 li a{display:block;width:70px;height:0px;text-decoration:none;border-left:20px transparent dotted;border-bottom:20px green solid;border-top:0;position:relative;}

#menu3 li a span{display:block;position:absolute;top:2px;left:0px;color:#fff;}

#menu3 li a em{display:block;position:absolute;	top:0px;left:50px;border-left:20px green solid;border-bottom:20px #fff solid;width:0;height:0;overflow:hidden;background:#fff;cursor:pointer;}

#menu3 li a:hover{ border-bottom-color:orange;}

#menu3 li a:hover span{background:orange;cursor:pointer;color:#0000CC;}

#menu3 li a:hover em{border-left:20px orange solid;}

#menu3 #m5{left:54px;}

#menu3 #m6{left:39px;}

#menu3 #m7{left:24px;}

#menu3 #m8{left:9px;}

/*滑动条*/

.box{width:200px;line-height:30px;margin:30px auto; position:relative;border:1px orange solid;}

.sliderbg{display:block;border-bottom:5px #F30 solid;width:200px;height:2px;line-height:2px;position:absolute;top:8px;left:0px;}

#sliderbar{width:10px;height:20px;margin-left:20px;}

#sliderbar a{display:block;border-left:5px transparent dotted;border-right:5px transparent dotted;border-bottom:5px orange solid;	width:0;height:0;position:relative;}

#sliderbar a b{position:absolute;top:5px;left:-5px;display:block;width:10px;height:15px;background:orange;overflow:hidden;}

#sliderbar a:hover{border-bottom:5px #00F solid;}

#sliderbar a:hover b{background:#00F; cursor:pointer;}

/*右边的上下三角形*/

.title{border-bottom:1px orange solid;line-height:26px;padding-left:10px;position:relative;overflow:hidden;background:#FFDB99;height:26px;}

.title b{display:block;width:280px;line-height:26px;height:26px;padding-left:10px;float:left;}

.title span a{display:block;width:0px;height:0px;float:left;overflow:hidden;position:absolute;border-left:5px transparent dotted;border-right:5px transparent dotted;}

.title .up a{border-bottom:5px #666 solid;top:7px;right:10px;}

.title .up a:hover{border-bottom:5px blue solid;}

.title .down a{border-top:5px #666 solid;top:14px;right:10px;}

.title .down a:hover{border-top:5px blue solid;}

/*综合运用3---------------------------幸运转轮1*/

#menu4box{width:182px;height:160px;margin:20px auto;background:#fff;/*背景颜色值*</div>
</div><div class="spage"></div>
<div class="pre_nex">
<em class="pre"><a href='/teach/teach-12440.html' class='pages'>上一条：IE6图片元素img下出现多余空白的问题</a> </em>
<em class="nex"><a href='/teach/teach-12442.html' class='pages'>下一条:网页重构时在IE6中遇到png兼容性</a> </em>
</div>
<div class="b-box"> 
<h4>相关文章</h4>
<ul class="l_pic_m clear"><li><a title="css float 浮动属性使用方法和实例讲解" target="_blank" href="/teach/teach-17164.html"><img alt="css float 浮动属性使用方法和实例讲解" src="https://img.genban.org/nopic.gif"><strong>css float 浮动属性使用方法和实例讲解</strong>在网站开发中，css float是一个经常需要使用的css属性，改属性用于设置css块级元素的浮动方向（左右浮动）。本文章向码农介绍css float使用方法和实例应用，需要</a></li>
<li><a title="CSS border边框属性详细讲解" target="_blank" href="/teach/teach-17161.html"><img alt="CSS border边框属性详细讲解" src="https://img.genban.org/nopic.gif"><strong>CSS border边框属性详细讲解</strong>CSS border用于设置HTML元素（如div）的边框，包括边框的宽度、颜色和样式。本文章向码农介绍CSS border边框属性详细内容，感兴趣的码农可以参考一下。</a></li>
<li><a title="CSS3 属性选择器" target="_blank" href="/teach/teach-17152.html"><img alt="CSS3 属性选择器" src="https://img.genban.org/allimg/c161013/14L3GI621520-11Y6.png"><strong>CSS3 属性选择器</strong>本文章主要和码农一起来学习CSS3选择器——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。</a></li>
<li><a title="css 属性选择器 - 根据html元素的name属性值选择改元素" target="_blank" href="/teach/teach-17151.html"><img alt="css 属性选择器 - 根据html元素的name属性值选择改元素" src="https://img.genban.org/nopic.gif"><strong>css 属性选择器 - 根据html元素的name属性值选择改元素</strong>在CSS页面设计中，有时我们需要根据html元素的属性值来选择这个元素，这时候，我们可以使用属性选择器</a></li>
<li><a title="css 高大上选择器:nth-child() 应用实例" target="_blank" href="/teach/teach-17119.html"><img alt="css 高大上选择器:nth-child() 应用实例" src="https://img.genban.org/nopic.gif"><strong>css 高大上选择器:nth-child() 应用实例</strong>:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素。本文章向码农们介绍css nth-child选择器的使用实例，感兴趣的码农可以参考一下。</a></li>
<li><a title="css margin-top属性不起作用的几个原因" target="_blank" href="/teach/teach-17092.html"><img alt="css margin-top属性不起作用的几个原因" src="https://img.genban.org/nopic.gif"><strong>css margin-top属性不起作用的几个原因</strong>大家在编写css的时候，明明设置了margin-top属性，但是并没有达到预期效果，而且检查多次也不知道我问题出在哪里。本文对margin-top失效的几种原因进行分析。</a></li>
</ul>
</div>
<div class="b-box">
<h4>最新文章</h4>
<ul class="l_pic_m clear"><li><a title="Windows自动更新造成“HTTP Error 503,The service is unavailable。”" target="_blank" href="/teach/teach-18327.html"><img alt="Windows自动更新造成“HTTP Error 503,The service is unavailable。”" src="https://img.genban.org/allimg/170620/145350AB-0-lp.png"><strong>Windows自动更新造成“HTTP Error 503,The service is unavailable。”</strong>公司开发的某业务系统出故障了，于是通过VPN在家里直接访问该系统，结果系统器返回 Service Unavailable --------------------------------------------------------------</a></li>
<li><a title="iframe 如何设置高度自适应 - iframe 自适应高度的方法" target="_blank" href="/teach/teach-17166.html"><img alt="iframe 如何设置高度自适应 - iframe 自适应高度的方法" src="https://img.genban.org/allimg/c161013/14L3GJF24F-4bH.jpg"><strong>iframe 如何设置高度自适应 - iframe 自适应高度的方法</strong>最近些项目遇到用iframe的地方，发现设置的固定高有时不能完全适应项目环境，不是高了就是不够高，在页面里看着很不爽。如何想办法到使用 iframe 自适应高度的方法，下面分</a></li>
</ul>
<ul class="l_text clear"><li><a title="纯CSS打造响应式自适应分页条" target="_blank" href="/teach/teach-18326.html">纯CSS打造响应式自适应分页条</a></li>
<li><a title="在html中，怎么设置背景图片不重复不平铺，只显示一张图片" target="_blank" href="/teach/teach-18201.html">在html中，怎么设置背景图片不重复不平铺，只显示一张图片</a></li>
<li><a title="CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行" target="_blank" href="/teach/teach-18200.html">CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行</a></li>
<li><a title="html hidden隐藏域作用及用法实例介绍" target="_blank" href="/teach/teach-17168.html">html hidden隐藏域作用及用法实例介绍</a></li>
<li><a title="完美解决Iframe高度自适应（兼容性好并且支持跨域）" target="_blank" href="/teach/teach-17167.html">完美解决Iframe高度自适应（兼容性好并且支持跨域）</a></li>
<li><a title="iframe 如何设置高度自适应 - iframe 自适应高度的方法" target="_blank" href="/teach/teach-17166.html">iframe 如何设置高度自适应 - iframe 自适应高度的方法</a></li>
<li><a title="css margin外边距使用实例分析" target="_blank" href="/teach/teach-17165.html">css margin外边距使用实例分析</a></li>
<li><a title="css float 浮动属性使用方法和实例讲解" target="_blank" href="/teach/teach-17164.html">css float 浮动属性使用方法和实例讲解</a></li>
<li><a title="css sprite讲解与使用实例" target="_blank" href="/teach/teach-17163.html">css sprite讲解与使用实例</a></li>
<li><a title="CSS 背景background使用方法" target="_blank" href="/teach/teach-17162.html">CSS 背景background使用方法</a></li>
</ul>
</div>
</div>
<div class="footer"><p>Copyright © 2021-2022 深圳市沃梦达电子商务有限公司 All Rights Reserved. </p><span style="display:none"><div style="display:none">
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?73d99e44a3343dda992d05b36d7c80e9";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</div></span></div>
<a href="#top"><div id="goto_top" class="goto_top"></div></a>
<script type="text/javascript" src="/assets/js/highlight.min.js"></script>
<script src="/assets/js/prism.min.js?v=1" charset="UTF-8"></script>
</body>
</html>