来源：蜘蛛抓取(WebSpider)
时间：2018-04-10 14:26
标签：
filecalc.exe是什么
百度网盘透明样式 | Userstyles.orgfloat:left和display:inline一起用是什么意思？
[问题点数：20分，结帖人Raffin]
float:left和display:inline一起用是什么意思？
[问题点数：20分，结帖人Raffin]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|Last Updated On
December 19, 2012
Gradient Text
This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text.
font-size: 72
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip:
-webkit-text-fill-color:
Code of Conduct
Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.
Want to tell us something privately?
Feel free to use our . That's a great place to let us know about typos or anything off-topic.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-starCSS3教程:边框属性border的极致应用
互联网 & 04-02 19:37:05 & 作者：佚名 &
网页制作Webjx文章简介：这里讨论的都是关于边框属性border的极致应用，这些应用虽说有些剑走偏门，但在一些特殊的场合，可能还是会用得上的，如果你对HTML代码有洁癖，有切肤之痛，并且认为冗余的标签影响到你的视觉神经，那么你可以权当一种
这里讨论的都是关于边框属性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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&Border属性的终极研究---看我七十二变(冰极峰:http://www.cnblogs.com/binyong)&/title&
&style type=&text/css&&
*{margin:0;padding:0;font-size:12}
body{background:#555;}
#wrapper{width:500margin:0border-left:4px #888border-right:4px #888background:#padding-bottom:50}
#corner{position:}
#corner em,#corner b,#corner strong,#corner i,#corner span{display:border-top:67border-right:67pwidth:0;height:0;overflow:}
#corner b{border-width:65border-top-color:position:top:0;left:0;}
#corner em{border-width:63border-top-color:position:top:0;left:0;}
#corner i{border-width:37border-top-color:position:top:0;left:0;}
#corner strong{border-width:35border-top-color:position:top:0;left:0;}
#corner span{border-width:33border-top-color:#position:top:0;left:0;}
#corner a{position:display:width:10height:10font-size:12color:#font-weight: text-decoration:}
#corner a#b1{left:34top:3}
#corner a#b2{left:18top:18}
#corner a#b3{left:3top:33}
h1 {width:310height:100line-height:100color:#2f231a;font-size:16margin:0position:}
h1 b {color:#b2c63a;font-size:16font-style:left:-1position:top:-1}
h1 strong{position:top:25left:100height:22}
.tab{width:400margin:0border:1margin-top:10text-align:}
h2{border-bottom:1line-height:30padding-left:10background:#FFC966;color:#7C66FF;text-align:}
.blog{background:#2f231a;}
.blog a:link,.blog a:visited{color:#}
h3{text-align:line-height:26height:26}
.photobox{border-left:10border-top:10border-right:10border-bottom:10}
.tab_pannel{width:380overflow:margin:20}
.tab_content{border:1height:100width:368margin:0text-align:}
/*基本形状----------------------------------------------------------------------------*/
.base{border:1padding-top:10width:370margin:0overflow:}
.base b{width:0;height:0;overflow:margin-right:20display:}
/*下三角形*/
.t1{border-left:20px #border-top:20border-right:20px #border-bottom:0;}
/*左三角形*/
.t2{border-top:20px #border-right:20border-bottom:20px #border-left:0;overflow:}
/*右三角形*/
.t3{border-top:20px #border-left:20px #000border-bottom:20px #border-right:0;}
/*上三角形*/
.t4{border-left:20px #border-bottom:20border-right:20px #border-top:0;}
/*基本形状*/
.tb_base{margin:0}
.tb_base .s1{display:border-left:20border-top:20border-right:20border-bottom:20width:0height:0overflow:margin:0}
.tb_base .s2{display:border-left:10border-top:10border-right:10border-bottom:10width:20height:20overflow:margin:0}
.tb_base .s3{display:border-left:20pborder-top:20border-right:20pborder-bottom:20width:0height:0overflow:margin:0}
.tb_base .s3-1{display:border-top:20pborder-left:20border-bottom:20pborder-right:20width:0height:0overflow:margin:0}
.tb_base .s4{display:border-left:40pborder-top:40width:0height:0overflow:}
.tb_base .s5{display:border-right:40pborder-top:40width:0height:0overflow:}
.tb_base .s6{display:border-left:40pborder-bottom:40px #000width:0height:0overflow:}
.tb_base .s7{display:border-bottom:40border-right:40pwidth:0height:0overflow:}
/*综合运用0*/
#menu1{list-style:width:380margin:0padding-left:5height:20}
#menu1 li{float:width:85height:20line-height:20margin-right:10}
#menu1 li a{position:width:100%;display:background:text-decoration:text-align:color:#fff}
#menu1 li a b{position:top:20left:40border-left:5px #border-top:5border-right:5px #border-bottom:0;display:width:0;height:0;overflow:}
#menu1 li a:hover{background:}
#menu1 li a:hover b{border-top:5display:}
/*综合运用1-菱形菜单*/
p{padding:20}
#other li a b{top:10 right:20background:#}
#menu2{list-style:width:368height:20position:left:6*left:0}
#menu2 li{width:70float:}
#menu2 li a{display:width:70border-left:20pborder-top:0;text-decoration:color:#position:}
#menu2 #m1 a{border-bottom:20left:39}
#menu2 #m2 a{border-bottom:20left:119}
#menu2 #m3 a{border-bottom:20left:199}
#menu2 #m4 a{border-bottom:20left:279}
#menu2 li a span{display:position:top:5left:8}
#menu2 li a:hover{color:#00FFFF;}/**/
#menu2 #m1 a:hover{border-bottom:20px #CC9933}
#menu2 #m2 a:hover{border-bottom:20}
#menu2 #m3 a:hover{border-bottom:20px #FF00FF}
#menu2 #m4 a:hover{border-bottom:20px #99CC66}
/*综合运用2-菱形菜单*/
#menu3{list-style:width:368height:20position:left:6*left:0;}
#menu3 li{width:90height::20line-height:20 float: overflow:position:}
#menu3 li a{display:width:70height:0text-decoration:border-left:20pborder-bottom:20border-top:0;position:}
#menu3 li a span{display:position:top:2left:0color:#}
#menu3 li a em{display:position: top:0left:50border-left:20border-bottom:20px #width:0;height:0;overflow:background:#cursor:}
#menu3 li a:hover{ border-bottom-color:}
#menu3 li a:hover span{background:cursor:color:#0000CC;}
#menu3 li a:hover em{border-left:20}
#menu3 #m5{left:54}
#menu3 #m6{left:39}
#menu3 #m7{left:24}
#menu3 #m8{left:9}
/*滑动条*/
.box{width:200line-height:30margin:30 position:border:1}
.sliderbg{display:border-bottom:5px #F30width:200height:2line-height:2position:top:8left:0}
#sliderbar{width:10height:20margin-left:20}
#sliderbar a{display:border-left:5pborder-right:5pborder-bottom:5 width:0;height:0;position:}
#sliderbar a b{position:top:5left:-5display:width:10height:15background:overflow:}
#sliderbar a:hover{border-bottom:5px #00F}
#sliderbar a:hover b{background:#00F; cursor:}
/*右边的上下三角形*/
.title{border-bottom:1line-height:26padding-left:10position:overflow:background:#FFDB99;height:26}
.title b{display:width:280line-height:26height:26padding-left:10float:}
.title span a{display:width:0height:0float:overflow:position:border-left:5pborder-right:5p}
.title .up a{border-bottom:5px #666top:7right:10}
.title .up a:hover{border-bottom:5}
.title .down a{border-top:5px #666top:14right:10}
.title .down a:hover{border-top:5}
/*综合运用3---------------------------幸运转轮1*/
#menu4box{width:182height:160margin:20background:#/*背景颜色值*/}
#menu4{list-style:width:182height:20position:margin:20}
#menu4 li{position:}
#menu4 li a{display:width:0;height:24border-top:10pborder-right:20px #FF00CCborder-bottom:10p}
#menu4 li a em{display:width:0;height:24border-top:10pborder-left:20px #FF00CCborder-bottom:10pposition:top:0;left:20cursor:}
#menu4 li a b{display:width:20height:22position:top:15left:13font-size:14color:#cursor:}
#menu4 li a{text-decoration:}
#menu4 li a:hover{border-right-color:#CC3300;}
#menu4 li a:hover em{border-left-color:#CC3300;cursor:}
#menu4 li a:hover b{color:#000000;cursor:}
#m9{left:50}
#m10{left:95}
#m11{left:27top:38}
#m12{left:72top:38}
#m13{left:117top:38}
#m14{left:50top:76}
#m15{left:95top:76}
/*综合运用4--------------------------幸运转轮2*/
#menu5box{position:width:182height:200margin:20background:#/*背景颜色值*/}
#menu5{list-style:}
.intbg{position:top:50left:40display:width:100height:98background:#CC66CC;/*线条颜色值*/}
#menu5 li{position:}
.out a{display:width:0;height:26border-top:10pborder-right:20px
#CC66CCborder-bottom:10p}
.out a em{display:width:0;height:26border-top:10pborder-left:20px #CC66CCborder-bottom:10pposition:top:0;left:19cursor:}
.out a b{display:width:20height:22position:top:15left:13font-size:14color:#cursor:}
.out a{text-decoration:}
.out a:hover{border-right-color:#CC3300;}
.out a:hover em{border-left-color:#CC3300;cursor:}
.out a:hover b{color:#000000;cursor:}
/*填充背景色*/
.int a{display:width:0;height:24border-top:10pborder-right:20px #border-bottom:10p}
.int a em{display:width:0;height:24border-top:10pborder-left:20px #border-bottom:10pposition:top:0;left:19}
.int a b{display:width:20height:22position:top:15left:13}
/*外面定位*/
#t1{left:72top:5}
#t2{left:11top:39}
#t3{left:133top:39}
#t4{left:11top:111}
#t5{left:133top:111}
#t6{left:72top:146}
/*里面定位*/
#f1{left:50top:38}
#f2{left:94top:38}
#f3{left:28top:76}
#f4{left:72top:76}
#f5{left:116top:76}
#f6{left:50top:115}
#f7{left:94top:115}
/*中心圆*/
#f4 a{text-decoration:border-top:10pborder-right:20px #FF0000border-bottom:10p}
#f4 a em{display:border-top:10pborder-left:20px #FF0000border-bottom:10pposition:top:0;left:19cursor:}
#f4 a:hover{border-right-color:#CC3300;}
#f4 a:hover em{border-left-color:#CC3300;cursor:}
#f4 a:hover b{font-size:14color:#cursor:}
#f4 a b{display:width:20height:22position:top:15left:13font-size:14color:#cursor:}
/*综合运用5-------------------------六角星*/
#menu6box{position:width:182height:150margin:20background:#}
#menu6{list-style:padding-top:10}
#menu6 li{width:50height:55border:1position:float:margin-left:5margin-bottom:5}
#menu6 li a{display:border-left:25pborder-bottom:40border-right:25pwidth:0;height:0;margin:0 text-decoration:}
#menu6 li a b{display:border-left:25pborder-top:40border-right:25pwidth:0;height:0;position:top:15left:0 z-index:1; cursor:}
#menu6 li a em{display:width:20height:22position: z-index:2; top:20left:18font-size:14color:# font-style:font-weight:cursor:}
#menu6 li a:hover{border-bottom-color:#000099;}
#menu6 li a:hover b{border-top-color:#000099;}
#menu6 li a:hover em{color:}
&div id=&wrapper&&
&div id=&corner&&&b&&/b&&em&&/em&&i&&/i&&strong&&/strong&&span&&/span&
&a href=&http://www.cnblogs.com/binyong& id=&b1&&冰&/a&
&a href=&http://www.cnblogs.com/binyong& id=&b2&&极&/a&
&a href=&http://www.cnblogs.com/binyong& id=&b3&&峰&/a&
&h1&Border属性的终极研究---看我七十二变&b&Border属性的终极研究---看我七十二变&/b&&strong&原创：冰极峰&/strong&&/h1&
&h2 class=&blog&&新Blog地址:&a href=&http://www.cnblogs.com/binyong&&http://www.cnblogs.com/binyong&/a&&/h2&
&div class=&tab& style=&margin-top:30&&
&h2&border的基本形状&/h2&
&div class=&base& style=&margin-top:10&&
&h3&四条边框的基本变化&/h3&
&table class=&tb_base&&
&span class=&s2&&&/span&&p&默认样式&/p&
&span class=&s1&&&/span&&p&米字格&/p&
&span class=&s3&&&/span&&p&左右透明&/p&
&span class=&s3-1&&&/span&&p&上下透明&/p&
&div class=&base& style=&margin-top:10&&
&h3&相邻两条边框组成45度斜角&/h3&
&table class=&tb_base&&
&span class=&s4&&&/span&
&span class=&s5&&&/span&
&span class=&s6&&&/span&
&span class=&s7&&&/span&
&div class=&base& style=&margin-top:10margin-bottom:10&&
&h3&相邻三条边框组成三角形&/h3&
&table class=&tb_base&&
&b class=&t1&&&/b&
&b class=&t2&&&/b&
&b class=&t3&&&/b&
&b class=&t4&&&/b&
&div class=&tab&&
&h2&百变神功--border的综合运用&/h2&
&div class=&tab_pannel&&
&ul id=&menu1&&
&li&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&今日头条&b style=&display:&&&/b&&/a&&/li&
&li&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&产品新闻&b&&/b&&/a&&/li&
&li&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&热点跟踪&b&&/b&&/a&&/li&
&li id=&other&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&分类新闻&b&&/b&&/a&&/li&
&div class=&tab_content&&
&p&这是一个第一个综合应用的例子，鼠标移到上面菜单看看效果，加上JS就是一个选项卡了&/p&
&div class=&tab_pannel&&
&ul id=&menu2&&
&li id=&m1&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&span&今日头条&/span&&/a&&/li&
&li id=&m2&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&span&产品新闻&/span&&/a&&/li&
&li id=&m3&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&span&热点跟踪&/span&&/a&&/li&
&li id=&m4&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&span&分类新闻&/span&&/a&&/li&
&div class=&tab_content&&
&p&这是第二个综合应用的例子，不规则菜单的应用。&/p&
&div class=&tab_pannel&&
&ul id=&menu3&&
&li id=&m5&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&span&今日头条&/span&&em&&/em&&/a&&/li&
&li id=&m6&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&span&产品新闻&/span&&em&&/em&&/a&&/li&
&li id=&m7&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&span&热点跟踪&/span&&em&&/em&&/a&&/li&
&li id=&m8&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&span&分类新闻&/span&&/a&&/li&
&div class=&tab_content&&
&p&这是第三个综合应用的例子，菱形菜单的应用。&/p&
&div class=&tab_content& style=&height:100margin-bottom:20&&
&h3 class=&title&&Border的模仿秀---滑动栏
&span class=&up&&&a id=&arrow& href=&#none& title=&我是border模仿的哟& onclick=&closeW('context')&&&/a&&/span&
&span class=&down&&&a id=&arrow& href=&#none& title=&我也是用border模仿的哟& onclick=&f_s('context')&&&/a&&/span&
&div class=&box&&
&span class=&sliderbg& &&/span&
&div id=&sliderbar& title=&我是border模仿&&
&a href=&#&&&b&&/b&&/a&
&div class=&tab_content& style=&height:250&&
&h3 class=&title&&Border的模仿秀---幸运转轮1
&span class=&up&&&a id=&arrow& href=&#none& title=&我是border模仿的哟& onclick=&closeW('context')&&&/a&&/span&
&span class=&down&&&a id=&arrow& href=&#none& title=&我也用是border模仿的哟& onclick=&f_s('context')&&&/a&&/span&
&div class=&photobox& id=&menu4box&&
&ul id=&menu4&&
&li id=&m9&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&祝&/b&&/a&&/li&
&li id=&m10&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&朋&/b&&/a&&/li&
&li id=&m11&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&友&/b&&/a&&/li&
&li id=&m12&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&幸&/b&&/a&&/li&
&li id=&m13&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&福&/b&&/a&&/li&
&li id=&m14&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&安&/b&&/a&&/li&
&li id=&m15&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&康&/b&&/a&&/li&
&div class=&tab_content& style=&height:280margin-top:20&&
&h3 class=&title&&Border的模仿秀---幸运转轮2
&span class=&up&&&a id=&arrow& href=&#none& title=&我是border模仿的哟& onclick=&closeW('context')&&&/a&&/span&
&span class=&down&&&a id=&arrow& href=&#none& title=&我也用是border模仿的哟& onclick=&f_s('context')&&&/a&&/span&
&div id=&menu5box& class=&photobox&&
&span class=&intbg&&&/span&
&ul id=&menu5&&
&li class=&int& id=&f1&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&&/b&&/a&&/li&
&li class=&int& id=&f2&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&&/b&&/a&&/li&
&li class=&int& id=&f3&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&&/b&&/a&&/li&
&li class=&int& id=&f4&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&爱&/b&&/a&&/li&
&li class=&int& id=&f5&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&&/b&&/a&&/li&
&li class=&int& id=&f6&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&&/b&&/a&&/li&
&li class=&int& id=&f7&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&&/b&&/a&&/li&
&li class=&out& id=&t1&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&有&/b&&/a&&/li&
&li class=&out& id=&t2&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&一&/b&&/a&&/li&
&li class=&out& id=&t3&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&种&/b&&/a&&/li&
&li class=&out& id=&t4&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&叫&/b&&/a&&/li&
&li class=&out& id=&t5&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&幸&/b&&/a&&/li&
&li class=&out& id=&t6&&&a href=&http://www.cnblogs.com/binyong& target=&_blank&&&em&&/em&&b&福&/b&&/a&&/li&
&div class=&tab_content& style=&height:230margin-top:20margin-bottom:20&&
&h3 class=&title&&Border的模仿秀--六角星
&span class=&up&&&a id=&arrow& href=&#none& title=&我是border模仿的哟& onclick=&closeW('context')&&&/a&&/span&
&span class=&down&&&a id=&arrow& href=&#none& title=&我也用是border模仿的哟& onclick=&f_s('context')&&&/a&&/span&
&div id=&menu6box& class=&photobox&&
&ul id=&menu6&&
&li&&a href=&http://www.cnblogs.com/binyong& id=&b1& target=&_blank&&&b&&/b&&em&六&/em&&/a&&/li&
&li&&a href=&http://www.cnblogs.com/binyong& id=&b2& target=&_blank&&&b&&/b&&em&角&/em&&/a&&/li&
&li&&a href=&http://www.cnblogs.com/binyong& id=&b3& target=&_blank&&&b&&/b&&em&星&/em&&/a&&/li&
&li&&a href=&http://www.cnblogs.com/binyong& id=&b4& target=&_blank&&&b&&/b&&em&亮&/em&&/a&&/li&
&li&&a href=&http://www.cnblogs.com/binyong& id=&b5& target=&_blank&&&b&&/b&&em&晶&/em&&/a&&/li&
&li&&a href=&http://www.cnblogs.com/binyong& id=&b6& target=&_blank&&&b&&/b&&em&晶&/em&&/a&&/li&
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
大家感兴趣的内容
12345678910
最近更新的内容
