使用padding制作白眼效果
padding画图
background-clip:content-box使得背景色仅在内容部分而不再padding部分显示
padding实现白眼
padding实现三道杠
a标签不使用伪类,直接使用inline-block加double实现三道杠
<!DOCTYPE html>
<html>
<head>
<style>
.double{
display:inline-block;
width:100px;
heiht:10px;
border-top:30px double;
padding:5px 0;
border-bottom:10px solid
}
</style>
</head>
<body>
<a class="double" href="https://www.imooc.com">
</a>
</body>
</html>
使用border-style的double属性更加便捷的写出三道杠
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.double{
width:100px;
height:10px;
border-top:30px double;
border-bottom:10px solid;
}
</style>
</head>
<body>
<div class="double"></div>
</body>
</html>
padding 图形绘制 2
padding 图形绘制
padding实现白眼圈圈
padding实现三杠杆
padding与图形绘制
实现三道杠:
<div class="line-tri"></div>
.line-tri{ width:150px; height:30px; padding:15px 0;/*杠杠中间的空白部分*/ border-top: 30px solid;/*第一道杠*/ border-bottom:30px solid;/*第三道杠*/ background-color:black;/*第二道杠*/ background-clip:content-box;/*第二道杠,important*/ }