CSS理解之padding--非原创

2018-06-24 00:24:55来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

代码如下:

<!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>

代码演示地址

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTTP状态码解读

下一篇:CSS 美化复选框 - 无图片方式