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

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS理解之padding</title>
  6.     <style type="text/css">
  7.         .wrap {
  8.             width: 150px;
  9.             padding: 20px;
  10.             border: 2px solid #ccc;
  11.         }
  12.  
  13.         .line-tri {
  14.             width: 150px;
  15.             height: 30px;
  16.             padding: 15px 0;
  17.             border-top: 30px solid #000;
  18.             border-bottom: 30px solid #000;
  19.             background-color: #000;
  20.             background-clip: content-box;
  21.         }
  22.  
  23.         .eye {
  24.             width: 150px;
  25.             height: 150px;
  26.             padding: 10px;
  27.             border: 10px solid #000;
  28.             border-radius: 50%;
  29.             background-color: #000;
  30.             background-clip: content-box;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <!--实现大队长的三道杠，百度网盘里面的切换图案-->
  36.     <div class="wrap">
  37.         <div class="line-tri"></div>
  38.     </div>
  39.     <br />
  40.     <br />
  41.     <br />
  42.     <!--实现"白眼"效果-->
  43.     <div class="eye"></div>
  44. </body>
  45. </html>

代码演示地址

CSS理解之padding--非原创的更多相关文章

  1. CSS样式命名整理（非原创）

    非原创,具体出自哪里忘了,如果侵害您的利益,请联系我. CSS样式命名整理 页面结构 容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体 ...

  2. Vue 仿QQ左滑删除功能（非原创）

    非原创,摘选来源:http://www.jb51.net/article/136221.htm. 废话不多说,相当实用,先记录. Html代码: <div class="contain ...

  3. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  4. CSS 内边距 padding 属性

    CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 p ...

  5. 老男孩Django笔记(非原创)

    .WEB框架 MVC Model View Controller 数据库 模板文件 业务处理 MTV Model Template View 数据库 模板文件 业务处理 ############## ...

  6. Linux下high CPU分析心得【非原创】

    非原创,搬运至此以作笔记, 原地址:http://www.cnitblog.com/houcy/archive/2012/11/28/86801.html 1.用top命令查看哪个进程占用CPU高ga ...

  7. 【 c语言中无符号和有符号的加法运算】【深入理解】--【sky原创】

    原文:[ c语言中无符号和有符号的加法运算][深入理解]--[sky原创]   第一题 #include<stdio.h> int main() { unsigned int a=6; i ...

  8. CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...

  9. 非原创。使用ajax加载控件

    非原创.来自博客园老赵. public class ViewManager<T> where T : System.Web.UI.UserControl { private System. ...

随机推荐

  1. 转载Agile Development 敏捷软件开发介绍

    转载原地址: http://blog.csdn.net/wayne_ran/article/details/1601008 敏捷开发(agile development)是一种以人为核心.迭代.循序渐 ...

  2. UVA10361 - Automatic Poetry

    “Oh God”, Lara Croft exclaims, “it’s one of these dumb riddles again!” In Tomb Raider XIV, Lara is, ...

  3. 启动报错:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener

    如果你是maven项目,tomcat在发布项目的时候没有同时发布maven依赖所添加的jar包,你需要设置一下eclipse:项目 —> 属性 -> Deployment Assembly ...

  4. C#学习笔记（六）：可空类型、匿名方法和迭代器

    可空类型 为啥要引入可空类型? 在数据库中,字段是可以为null值的,那么在C#中为了方便的操作数据库的值,微软引入了可空类型. 声明可空类型 我们可以使用两种方法声明一个可空类型: Nullable ...

  5. （转）WordPress的主查询函数-query_posts()

    今天说说WordPress 的主查询函数 -query_posts(),因为我正在制作的主题里面多次用到了这个函数 . query_posts()查询函数决定了哪些文章出现在WordPress 主 循 ...

  6. 解决mysql 1040错误Too many connections的方法

    从官方文档知道linux上面编译安装的mysql默认的连接为100个,这样对于网站的需求来说是远远不够的. mysql官方告诉我们需要修改max_connections的值,那么我们怎么去修改呢?有两 ...

  7. 正则表达式（Regular Expression）

    匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^\x00-\xff] 评注:可以用来计算字符串的 ...

  8. ssh 设置免password登录

    如果: 实现->操作机A机 要以用户"user1"身份.免password登录B机和C机? B机和C机 建立用户 user1 而且能够ssh 登录. A机设置: 1.安装ss ...

  9. 数据返回[数据库基础]——图解JOIN

    废话就不多说了,开始... 一.提要 JOIN对于接触过数据库的人,这个词都不生疏,而且很多人很清楚各种JOIN,还有很多人对这个懂得也不是很透辟,此次就说说JOIN操纵. 图片是很容易被接受和懂得, ...

  10. Openfire服务器MySQL优化

    Openfire服务器MySQL优化: [root@iZ28g4ctd7tZ ~]# mysql -u root -p XXXXX mysql> show processlist; +----- ...