-
- 慕函数1072086 2021-11-15
border-style类型
solid: 实线
dashed: 虚线，Chrome和Firefox显示的比较稀疏，IE显示的比较密集
dotted: 点线，Chrome和Firefox显示的是肖方，IE显示的是小圆
double:双线，兼容性很好，计算规则：双线宽度永远相等，中间间隔+/-1，1px: 0(左实线)+1(中间区域)+0(右实线), 2px:1+0+1, 3px:1+1+1，4px:1+2+1,5px: 2+1+2，6px:2+2+2,7px:2+3+2
inset: 内凹
outset：外凸
groove：沟槽
ridge：山脊
- 0赞 · 0采集
-
- CC囧喵 2019-12-02
border-style
1、border-style:solid; 实线
2、border-style:dashed; 虚线
3、border-style:dotted; 点线
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .radius_container { position: relative; } .box { position: absolute; width: 150px; height: 150px; overflow: hidden; } .dotted { width: 100%; height: 100%; border: 150px dotted #EF2424; } .radius-right_top { top: 0; left: 400px; } .radius_right_bottom { left: 400px; top: 200px; } .radius_left_bottom { left: 0; top: 200px; } .row { position: absolute; top: 75px; width: 550px; height: 200px; background: rgba(30,50,190,0.5); color: #ffffff; z-index: 3; font-size: 100px; line-height: 200px; text-align: center; } .col { position: absolute; left: 75px; width: 400px; height: 350px; background: rgba(30,50,190,0.5); z-index: 2; } </style> </head> <body> <div class="radius_container"> <div class="row">按钮</div> <div class="col"></div> <div class="box"> <div class="dotted"></div> </div> <div class="box radius-right_top"> <div class="dotted"></div> </div> <div class="box radius_right_bottom"> <div class="dotted"></div> </div> <div class="box radius_left_bottom"> <div class="dotted"></div> </div> </div> </body> </html>
4、border-style:double; 双线（兼容性非常好）
规律：双线宽度永远相等，中间间隔±1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*border-style设为double，实现三道杠*/ .double { width: 120px; height: 20px; background: rgba(0,0,0,0.1); border-top: 60px double #CE2424; border-bottom: 20px solid #CE2424; } </style> </head> <body> <!-- border-style设为double，实现三道杠 --> <div class="double"></div> </body> </html>
5、border-style:inset; 内凹（风格过时，兼容性差）
6、border-style:outset; 外凸（风格过时，兼容性差）
7、border-style:groove; 沟槽（风格过时，兼容性差）
8、border-style:ridge; 山脊（风格过时，兼容性差）
- 1赞 · 1采集
-
- pinzaghi 2019-10-09
border-style：double类型
-
截图0赞 · 0采集
-
- 一刀斩2333 2019-07-25
border-style:double;
- 0赞 · 0采集
-
- iFlowers 2018-12-23
border-style: dotted在chrome和IE下是有区别的。
-
截图1赞 · 1采集
-
- qq_银色水晶瓶_0 2018-11-24
三条杠---------------------
-
截图0赞 · 0采集
-
- qq_银色水晶瓶_0 2018-11-24
dashed
-
截图0赞 · 0采集
-
- 卓明古 2018-11-20
border-style:solid;dashed;dotted
- 0赞 · 0采集
-
- 往上向下 2018-09-28
利用border：double实现三条杠效果
-
截图0赞 · 0采集
-
- 慕仔4193758 2018-09-17
实线 border-style:solid; 虚线 border-style:dashed; chrome/firefox: 宽3：高1 视觉上较稀疏 IE: 宽2：高1 视觉上较密集 点线 border-style:dotted; chrome/firefox: 小方 IE: 小圆
- 1赞 · 0采集
-
- Sandaydi 2018-06-25
border-style : solid(实线) | dashed(虚线) | dotted(点线) | double(双实线) | inset(内凹) | outset(外凸) | groove(沟槽) | ridge(山脊)
- 1赞 · 0采集
-
- 大雅 2018-04-12
.icon1{ display:inline-block;width:120px;height:20px;color:#ccc; border-top:60px double; border-bottom:20px solid; } .icon1:hover{ color:red;}<span class="icon1"></span>
- 0赞 · 0采集
-
- qq_XR_1 2018-04-10
solid（单线边框） ，实现圆角边框。
double（双线边框），
- 0赞 · 0采集
-
- 辛和荑 2018-03-20
- 了解各种border-style类型。 实线 border-style:solid; 虚线 border-style:dashed; chrome/firefox: 宽3：高1 视觉上较稀疏 IE: 宽2：高1 视觉上较密集 点线 border-style:dotted; chrome/firefox: 小方 IE: 小圆
- 1赞 · 0采集
-
- 葫芦胡 2018-02-24
- 三等分
-
截图0赞 · 0采集
-
- 葫芦胡 2018-02-24
- double的规则
-
截图0赞 · 0采集
-
- 葫芦胡 2018-02-24
- 根据dotted在ie7 8中实现圆角效果
-
截图0赞 · 0采集
-
- 慕粉084536660 2018-01-21
- outset 外突
- 0赞 · 0采集
-
- 慕粉084536660 2018-01-21
- border-style:inset 内凹线
- 0赞 · 0采集
-
- 慕粉084536660 2018-01-20
- solid 实线 dashed虚线 dotted点线 （（IE的点为圆点，谷歌和火狐是正方形）
- 0赞 · 0采集
-
- 慕用6434241 2018-01-18
- 三横效果
-
截图0赞 · 1采集
-
- 念奴娇 2017-12-31
- 1.border-style：solid实线 2.border-style：dashed 虚线 IE中稀疏 firefox和chrome密集 3.border-style：dotted 点线 IE中为小圆，制作圆角矩形 firefox和chrome小方 .dotted{width:100%;height:00%x;border:149px dotted:#cd0000} .box{width:150px;height:150px;overflow:hidden;} 4.border-style:double双线 1px: 0+1+0 2px:1+0+1; 3px:1+1+1; 4px:1+2+1; 5px:2+1+1; 总之，双线宽度永远相等，中间间隔+-1 4.制作移动端常用的三行展开按钮 {width:120px;height:20px; border-top:60px double; border-bottom:20px solid
- 0赞 · 1采集
-
- 慕仰5026840 2017-12-25
- { width:120px; height: 20px; border-top:60px double; border-bottom:20px solid; }
- 0赞 · 1采集
-
- 糟糠之妻 2017-11-25
- border-style类型：solid（实线）、dashed（虚线）^虚线边框在谷歌火狐中宽高比例为3/1、IE中为2/1、dotted（点线）^点线在火狐谷歌中为方形 IE中为圆形（通过文本溢出隐藏可以做圆角效果）、double（双线）^计算规则为双线宽度永远相等中间区域+1或-1、
- 2赞 · 2采集
-
- 慕设计0729451 2017-11-22
- 可以做圆，做三分等
-
截图0赞 · 3采集
-
- qq_摇耳朵的小布丁_0 2017-11-18
- border-style:double 制作三实线
- 0赞 · 1采集
-
- 慕田峪2307485 2017-11-18
- border_width不支持百分比，
-
截图0赞 · 0采集
-
- 慕仰4254390 2017-11-16
- 三等分
-
截图0赞 · 1采集
-
- 慕仰4254390 2017-11-16
- 虚线宽度计算规则
-
截图0赞 · 1采集
-
- 慕仰4254390 2017-11-16
- 做圆角的方法
-
截图0赞 · 1采集
