-
实现响应去的大小
查看全部 -
等高布局
查看全部 -
.div1 { height:200px; width:600px; border-right:50px solid transparent; background:100% 30px #ccc url(img/HBuilder.png) no-repeat; }查看全部 -
.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>
查看全部 -
<!DOCTYPE html> <html> <head></head> <style> .add{ display: block; width: 100px; height: 100px; position: relative; color: #ccc; transition: color .25s; border: 1px solid; } .add:before { content: ""; width: 80px; position: absolute; left: 10px; top: 45px; border-top:10px solid; } .add:after { content: ""; height: 80px; position: absolute;; left: 45px; top: 10px; border-left: 10px solid; } .add:hover { color: #067; } </style> <body> <div > </div> <p></p> <a class="add" href="javascript:"></a> </body> </html>查看全部 -
等高布局
查看全部 -
solid（单线边框） ，实现圆角边框。
double（双线边框），
查看全部 -
better way
查看全部 -
透明border突破可视区域的限制
查看全部 -
chrome页面不兼容
查看全部 -
增加响应区域大小—复选框
查看全部 -
可用梯形作圆角效果，兼容性好
查看全部 -
实现梯形。
查看全部 -
实现三角
查看全部 -
background-position定位只能相对于左上角，当需要距离右边缘时，可以用border，因为100%右侧定位不计算border区域
e.g. border-right:50px solid transpanrent;(透明边框) background-position:100% 40px;
查看全部
举报
0/150
提交
取消