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

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

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

那么border有什么属性呢？

Border-width

Border-style

Border-color

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

border-left

border-right

border-top

border-botttom

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

下面来个例子：

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

先来个实现过程图片

我们最后是做个三角形。

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

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

实现代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>border</title>

    <style>

        div{

            width: 0;

            height: 0;

            border: 10px solid #000;

            border-bottom: none;

            border-left-color:transparent;

            border-right-color: transparent;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</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. Linux下yum升级安装PHP 5.5

    我的系统是Centos 6.5 ,安装lnmp是直接yum安装的,php版本为5.4的,当安装了最新的phpMyAdmin(4.5.1)数据库管理软件后发现不支持php5.4使用,所以只好升级下php ...

  2. [刘阳Java]_Java程序员的成长路线_第3讲

    按照Java从业人员的职位晋升来说,Java程序成长路线大致如下 Java程序员 JavaEE初级软件工程师 JavaEE中级软件工程师 JavaEE高级软件工程师 Java架构师 按照职业发展方向, ...

  3. 用PHP将Unicode 转化为UTF-8

    function unescape($str) { $str = rawurldecode($str); preg_match_all("/(?:%u.{4})|&#x.{4};|& ...

  4. CentOS6.4完全安装FFmpeg手记

    鼓捣媒体的人对FFmpeg应该不会陌生,它不仅功能强大,结构优美,灵活.易扩展,也是很其他多媒体播放器的基础,例如VLC,Mplayer等等,还有好多商业播放器都用了ffmpeg,但这些商业软件却没有 ...

  5. mongodb+pycharm使用报错，无法往mongodb存文件

    1 mongodb必须在启用状态下,启用如下 C:/mongodb/bin>mongod --dbpath C:\mongodb\data\db 不能关闭cmd 2 其他问题,貌似在Connec ...

  6. SSE：服务器发送事件,使用长链接进行通讯

    概述 传统的网页都是浏览器向服务器“查询”数据,但是很多场合,最有效的方式是服务器向浏览器“发送”数据.比如,每当收到新的电子邮件,服务器就向浏览器发送一个“通知”,这要比浏览器按时向服务器查询(po ...

  7. ARP协议

    ARP协议就是一个获取对方MAC地址的协议,ARP协议它是一个网络层的协议,它的作用是通过ARP request报文来获得对方的MAC地址,ARP报文里面发送的内容大概是192.168.1.20你的M ...

  8. Quartz任务调度快速入门(转）

    转自http://www.blogjava.net/baoyaer/articles/155645.html 概述 了解Quartz体系结构 Quartz对任务调度的领域问题进行了高度的抽象,提出了调 ...

  9. javaBean与Map<String,Object>互转

    背景:有时候想不通阿帕奇的BeanUtils是怎么进行map和Bean互相转化的. 工作闲暇之余,自己写个一小段代码,一探究竟,试试才发现,原来一切并非我们想的那么什么和复杂. 注:这里只是简单实例, ...

  10. 如何查看 oracle 官方文档

    Concept 包含了 oracle 数据库里面的一些基本概念和原理, 比如 数据库逻辑结构, 物理结构, 实例结构, 优化器, 事务等. PDF 460页 Reference 包含了动态性能视图, ...