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

代码如下:

<!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--非原创的更多相关文章

  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. poj 3026 Borg Maze (BFS + Prim)

    http://poj.org/problem?id=3026 Borg Maze Time Limit:1000MS     Memory Limit:65536KB     64bit IO For ...

  2. [iOS基础控件 - 6.10.2] PickerView 自定义row内容 国家选择Demo

    A.需求 1.自定义一个UIView和xib,包含国家名和国旗显示 2.学习row的重用   B.实现步骤 1.准备plist文件和国旗图片     2.创建模型 // // Flag.h // Co ...

  3. [iOS基础控件 - 6.9.3] QQ好友列表Demo TableView

    A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组   code so ...

  4. Oracle_11g_R2安装详解_for_Windows_7

    Oracle 11g R2安装全攻略 - For Windows 7 图文教程 1.下载Oracle 11g R2的Windows版本,官方下载地址如下: http://download.oracle ...

  5. python的一些总结1

    1.安装环境 window用户下载 python :https://www.python.org/downloads/release/python-2710/ 安装不解释.. 配置环境变量  找到 P ...

  6. Winform-控制边框显示属性

  7. ElasticSearch使用

    安装之前,请参考https://github.com/richardwilly98/elasticsearch-river-mongodb根据你的MongoDB版本号决定需要的elasticsearc ...

  8. 归并排序的C语言实现

    归并排序的核心思想是 Divide-and-Conquer 算法,即将要解决的size为n的问题,分成a个size为n/b的子问题,这些子问题的结果经过O(n^d)的时间复杂度合并,即可解决最初的问题 ...

  9. iOS开发——面试总结(一)

    面试总结(一) 通过网络搜寻和自己总结经历找了一些IOS面试经常被问道的问题: 1.搞清楚touch事件的传递(事件的响应链) 事件的响应(responder chain) 只有继承了UIRespon ...

  10. 分享php中四种webservice实现的简单架构方法及实例(转)

    本人所了解的webservice有以下几种:PHP本身的SOAP,开源的NUSOAP,商业版的PHPRPC,以及使用二进制传输数据流的 HessianPHP,那么一下就简单的介绍下这几种webserv ...