-
- 慕函数1072086 2021-11-15
background定位的局限（css2.1）：只能相对左上角数值定位，不能相对右下角
border-right: 50px solid transparent; // 右侧一个透明的边框
background-position：100% 45px; // 100%右侧定位不计算border区域
- 0赞 · 0采集
-
- 慕函数1072086 2021-11-15
border-color默认就是color：当没有指定border-color的时候，会使用color的颜色
类型的还有 box-shadow，text-shadow，outline等
实际用途：hover
- 0赞 · 0采集
-
- 慕函数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采集
-
- 慕函数1072086 2021-11-15
border-width不支持百分比值，受语义和使用场景决定的，不会因为设备变大就按比例变大
border-width默认值是 medium（3px）
- 0赞 · 0采集
-
- 百事可爱i 2021-09-03
两栏等高布局：不支持百分比分宽度
- 0赞 · 0采集
-
- 百事可爱i 2021-09-03
添加透明边框增加点击区域
增加可视渲染区域
- 0赞 · 0采集
-
- 百事可爱i 2021-09-03
background
- 0赞 · 0采集
-
- 百事可爱i 2021-09-03
border
- 0赞 · 0采集
-
- 百事可爱i 2021-09-03
border
- 0赞 · 0采集
-
- qq_慕码人6358318 2021-04-15
fsadsdal sdaskljdklas html .sds1
-
截图0赞 · 0采集
-
- CC囧喵 2019-12-04
border-color
1、在没有指定border-color时，默认使用color作为边框色
box-shadow、text-shadow、outline均有此特性
2、案例
只需一个color的hover变化，就可以一起变色；且transition过渡也只要一个color属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .add { display: inline-block; width: 120px; height: 120px; border: 1px solid; color: #ccc; position: relative; transition: color 0.5s; } .add:before { content: ""; display: block; width: 80px; border-top: 10px solid; position: absolute; left:20px; top: 55px; } .add:after { content: ""; display: block; height: 80px; border-left: 10px solid; position: absolute; left: 55px; top: 20px; } .add:hover { color: #234BD5; } </style> </head> <body> <a href="" class="add"></a> </body> </html>- 0赞 · 1采集
-
- 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采集
-
- CC囧喵 2019-12-02
border-width
1、不支持百分比，由其语义和使用场景决定。因为边框宽度不会因设备变大就按比例变大
2、支持关键字：thin、medium（默认）、thick
thin：细的 1px
medium：中等的 3px（默认值）；因为border-style：double至少3px才有效果
thick：粗的 5px
其他不支持百分比的属性：
outline、box--shadow、text-shadow……
- 0赞 · 0采集
-
- 左右plus 2019-11-18
border-width不支持百分比
border-width 3种 常用关键字 thin（1px），medium（3px）、thick（5px）。默认medium
- 0赞 · 0采集
-
- pinzaghi 2019-10-09
border的transparent属性非常常用，兼容性很好
-
截图0赞 · 0采集
-
- pinzaghi 2019-10-09
border边框交界处是斜线
-
截图0赞 · 0采集
-
- pinzaghi 2019-10-09
border-color的默认颜色就是color
-
截图0赞 · 0采集
-
- pinzaghi 2019-10-09
border-style：double类型
-
截图0赞 · 0采集
-
- pinzaghi 2019-10-09
border-width不支持百分比，主要是由语义和使用场景决定的
-
截图0赞 · 0采集
-
- 机智的小猴子 2019-08-08
- 加号变色。
-
截图0赞 · 0采集
-
- qq_白菜_15 2019-08-04
1.添加了过渡 2.利用了calc函数居中 3.声明父div，设置border的时候不声明颜色，只声明color 4.before，after不声明color，继承父元素div的color <!DOCTYPE html> <html> <head><meta charset="UTF-8"> <title>Document</title> <style> div { border: 1px solid; color: blue; width: 150px; height: 150px; position: relative; transition: 1s color; } /* 横着放 */ div::before { content: ""; width: 60px; height: 20px; border-bottom: 20px solid; display:inline-block; box-sizing: border-box; position: absolute; left: calc(50% - 30px); top: calc(50% - 10px); } /* 竖着放 */ div::after { content: ""; height: 60px; width: 20px; border-left: 20px solid; display:inline-block; box-sizing: border-box; position: absolute; z-index: 1; left: calc(50% - 10px); top: calc(50% - 30px); } div:hover { color: red; } </style> </head> <body> <div></div> </body> </html>- 0赞 · 0采集
-
- 一刀斩2333 2019-07-25
复选框的样式分析
- 0赞 · 0采集
-
- 一刀斩2333 2019-07-25
border制作三角形状出来的样本。
- 0赞 · 0采集
-
- 一刀斩2333 2019-07-25
可以试着去修改右端的边框样式，在进行定位分析。无论边框怎么变换图片的位置都是相对于右面边框的绝对0位置。
- 0赞 · 0采集
-
- 一刀斩2333 2019-07-25
border-style:double;
- 0赞 · 0采集
-
- 梦挽情歌 2019-04-02
border-color默认颜色就是color，类似的还有box-shadow，text-shadow
- 1赞 · 1采集
-
- 梦挽情歌 2019-04-02
border-width不支持百分比：没有因为设备变化而变化的特性，类似的还有outline，box-shadow，text-shadow
- 1赞 · 1采集
-
- 你是谁你在哪 2019-03-24
- border-withd不支持百分比
-
截图0赞 · 0采集
-
- 慕标8412388 2019-03-08
border-width不支持百分比
支持关键字：thin,medium(默认值),thick
- 0赞 · 0采集
-
- feibenren 2019-02-27
border-color默认值
-
截图0赞 · 0采集
