首页 > 代码库 > 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--非原创
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。