因为在慕课网观看了张大神的视频,学习到了一点东西,向和大家分享。视频地址
代码如下:
<!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>
时间: 2024-10-27 03:50:51