首页 > 代码库 > CSS理解之padding--非原创

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>

代码演示地址

CSS理解之padding--非原创