你的位置:首页 > 网页设计

[网页设计]CSS理解之padding


因为在慕课网观看了张大神的视频,学习到了一点东西,向和大家分享。视频地址

代码如下:

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <title>CSS理解之padding</title>  <style type="text/css">    .wrap {      width: 150px;      padding: 20px;      border: 2px solid #ccc;    }    .line-tri {      width: 150px;      height: 30px;      padding: 15px 0;      border-top: 30px solid #000;      border-bottom: 30px solid #000;      background-color: #000;      background-clip: content-box;    }    .eye {      width: 150px;      height: 150px;      padding: 10px;      border: 10px solid #000;      border-radius: 50%;      background-color: #000;      background-clip: content-box;    }  </style></head><body>  <!--实现大队长的三道杠,百度网盘里面的切换图案-->  <div class="wrap">    <div class="line-tri"></div>  </div>  <br />  <br />  <br />  <!--实现"白眼"效果-->  <div class="eye"></div></body></html>

代码演示地址