-
添加透明边框增加点击区域
增加可视渲染区域
查看全部 -
background
查看全部 -
border
查看全部 -
border
查看全部 -
fsadsdal sdaskljdklas html .sds1
查看全部 -
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>
查看全部 -
border-width
1、不支持百分比,由其语义和使用场景决定。因为边框宽度不会因设备变大就按比例变大
2、支持关键字:thin、medium(默认)、thick
thin:细的 1px
medium:中等的 3px(默认值);因为border-style:double至少3px才有效果
thick:粗的 5px
其他不支持百分比的属性:
outline、box--shadow、text-shadow……
查看全部 -
border-width不支持百分比
border-width 3种 常用关键字 thin(1px),medium(3px)、thick(5px)。默认medium
查看全部 -
border的transparent属性非常常用,兼容性很好
查看全部 -
border边框交界处是斜线
查看全部 -
border-color的默认颜色就是color
查看全部 -
border-style:double类型
查看全部 -
border-width不支持百分比,主要是由语义和使用场景决定的
查看全部 -
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>
查看全部 -
复选框的样式分析
查看全部
举报