border这个属性在页面上的使用率还是很高，例如我们需要理解的盒模型就需要对border有个

比较深的理解，如果你会盒模型，但对border没有深的理解，那只能说你只是知道盒模型，而

不是懂得盒模型，因为学习盒模型的过程中必须懂border。

那么border有什么属性呢？

Border-width

Border-style

Border-color

上面的是四个边的，还可以再分细到每个边。

border-left

border-right

border-top

border-botttom

而它们下面也是有上面的属性。

下面来个例子：

这个例子可以让我们更懂得一些边框的东西。

先来个实现过程图片

我们最后是做个三角形。

而这个三角形可以使用到那里呢？

可以使用下拉框的右边的一个小图标。至于别的实用地方，需要自己仔细观察浏览过的网站。

实现代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>border</title>
  6.     <style>
  7.         div{
  8.             width: 0;
  9.             height: 0;
  10.             border: 10px solid #000;
  11.             border-bottom: none;
  12.             border-left-color:transparent;
  13.             border-right-color: transparent;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div></div>
  19. </body>
  20. </html>

从代码看思路，然后自己扩展。

今日例子border的更多相关文章

  1. CSS3 Shape ---使用形状改变旁边内容的布局

    注意 本文所实现的功能,在浏览器的支持上并不好,除chrome浏览器外其余的大部分浏览器均不支持,虽然可以使用polyfill解决,但也不能很好的支持,有时也会出错 polyfill使用方法 下载po ...

  2. border做箭头的例子

    <style> .test{ margin:0 auto; width:100px; height:100px; background:lightskyblue; position:rel ...

  3. 从今日起，我会把OpenGL红宝书上的例子用完整的代码形式写在我的博客中，

    1.使用教程:OpenGL红宝书第8版 2.使用的库工具:GLEW和GLFW 3.使用的IDE:vs2012 4.说说目的:完整的看一遍OpenGL,加深印象并且熟练掌握运用OpenGL 5.欢迎有相 ...

  4. 类似今日头条，头部tab可滑动，下面的内容可跟着滚动，掺杂着vue和require等用法例子

    1.在main.js里 /*主模块的入口 结合require一起使用*/ require.config({//require的基础用法 配置一下 paths: { "Zepto" ...

  5. web前端整套面试题(二)--今日头条面试题

    12道单选,7道不定项选择,2道编程题 一.单选(12题) 1.[单选题]在HTML中,( )可以在网页上通过链接直接打开邮件客户端发送邮件. A.<a href=”telnet:ming.zh ...

  6. SQLServer地址搜索性能优化例子

    这是一个很久以前的例子,现在在整理资料时无意发现,就拿出来再改写分享. 1.需求 1.1 基本需求: 根据输入的地址关键字,搜索出完整的地址路径,耗时要控制在几十毫秒内. 1.2 数据库地址表结构和数 ...

  7. 【DWR系列01】-DWR简介及入门例子

    .literal { background-color: #f2f2f2; border: 1px solid #cccccc; padding: 1px 3px 0; white-space: no ...

  8. php相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子

    相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子包括五个部分: 一.相册首页 <html> <head> <meta charset="utf- ...

  9. jQuery属性/CSS使用例子

    jQuery属性/CSS 1..attr() 获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性. 例1:获取元素的属性的值 <p title="段落 ...

随机推荐

  1. 清除浮动的 why

    如果你想第三个p不被前面的浮动层所影响,就对它进行清除如果没有清除,第三个层就会移到第一个p下面 记住!!浮动是用来布局的~你看你的网页设计图,好几个版块在一条线上就是要浮动了,不需要浮动就是版块跟前 ...

  2. python-->基础-->001-->基本模块使用汇总

    一.python调用linux系统命令模块 import os import commands 例如,调用系统命令执行ping操作: 使用commands模块方法:>>> impor ...

  3. PHP开发模式之代理技术

    在实际开发中,我们经常要调用第三方的类库如SOAP服务等.使用这些第三方 组件并不难,最麻烦的莫过于调用了,一般的调试手段最方便的莫过于记日志了. 示例: 假如有以下第三方类库. // filenam ...

  4. spider

    from lxml import etreeimport requestsdef getHtml(html): novelcontent = requests.get(html).content re ...

  5. 信心题--FUOJ2226（莫队算法）

    http://acm.fzu.edu.cn/problem.php?pid=2226 信心题,还说是信心题,题目给的真好.但是一点都不像信心题. 又是一个新的算法,莫队算法 莫队算法是一个用数组就可以 ...

  6. 一个叫 team 的表，里面只有一个字段name, 一共有4 条纪录，分别是a,b,c,d, 对应四个球队，现在四个球队进行比赛，用一条sql 语句显示所有可能的比赛组合.

    select *from timp a, timp b where a.name > b.name 结果:

  7. [UE4]武器碰撞

    实现武器战斗伤害系统,击中时如何发出碰撞事件产生伤害,目前探索的有通过物理碰撞和LineTrace两种方法. 物理碰撞通过Overlap事件的方法,优点是易于实现,缺点是无法具体到碰撞骨骼位置,低帧数 ...

  8. jexus ASP.NET开发注意项1

    Jexus@宇内(273766940) 9:09:02 linux上的文件名和文件路径是大小写敏感的. Jexus@宇内(273766940) 9:10:11 在win上,你文件名是 Login.as ...

  9. plsql基础

    语法:declare-->声明变量 begin-->执行部分 exception-->异常 end-->结束 / 最简单的程序:begin null; end; 输出语句:DB ...

  10. PHP接口使用

    <?php interface IEmployee { function working(); } interface IDeveloper { function Coding(); } cla ...