我一直以为css中的border是正方形的 像这样

因为我平时用的时候都是 border:1px solid #000，都是同一个颜色所以看不出来

当我给每一个边分别设置颜色的时候才发现 他们是以梯形分布的，border中的top right bottom left 是以梯形显示的，如果此时你给div设置宽高为0的话 他们就变成三角形了

关于css中的border的更多相关文章

  1. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

  2. css中的border还可以这样玩

    在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人 ...

  3. css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0

    css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示:   ht ...

  4. CSS中设置border:none和border:0的区别

    在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一 ...

  5. 利用css中的border生成三角，兼容包括IE6的主流浏览器

    1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...

  6. 深入理解之css中的border属性

    1. border-width:不支持不百分比 1)受本身的使用场景决定. 例子:左边为手机,右边为显示器,但是他们边框的宽度是差不多的,不会因为设备大就让边框宽度变大. 2. border-widt ...

  7. 纯css来画图-border应用

    基础知识: Css画图大部分是使用了css中的border来绘画图形,那首先我们就来看下border的基础知识,至于其他的遇到了再讲吧! Border的基础知识: 一般我们这样简写: border: ...

  8. clip-path 教程：使用 CSS 中的 clip-path 轻松实现多边形

    作为一个前端开发,一个主要的工作就是来实现设计师设计的UI界面.而在UI界面中,各种各样的形状元素应用则是随处可见,比如三角形: 以前碰到这种形状的时候,会使用各种黑科技的技巧,比如使用CSS中的bo ...

  9. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

随机推荐

  1. java中list的使用方法

    LIST是个容器接口,可以理解为动态数组,传统数组必须定义好数组的个数才可以使用,而容器对象无须定义好数组下标总数, 用add()方法即可添加新的成员对象,他可以添加的仅仅只能为对象,不能添加基本数据 ...

  2. （转）Windows管道(Pipe)重定向stdout,stderr,stdin

    参考: http://qiusuoge.com/11496.html http://www.cnblogs.com/BoyXiao/archive/2011/01/01/1923828.html st ...

  3. MySQL 5.7 for Windows 解压缩版配置安装

    从MYSQL5.7.6开始,安装MYSQL提示“请键入 NET HELPMSG 3534 以获得更多的帮助”的解决办法 今天安装MySQL提示如下错误: ----------------------- ...

  4. HDU 3487 Play with Chain | Splay

    Play with Chain Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  5. java开发第四天——莫名其妙的一天

    搞了一天的ACM,欲哭无泪,消化的不好打了一天的嗝,然后在机房睡了一个下午,感觉还真的有点对不起队友的说.别的借口我也不找了,确实是自己不努力,时至今日,一切都是我咎由自取.等这次项目一结束我就全身心 ...

  6. [转]PHP经验——PHPDoc PHP注释的标准文档

    文档翻译自:http://en.wikipedia.org/wiki/Phpdoc 标记 用途 描述 @abstract   抽象类的变量和方法 @access public, private or ...

  7. C++设计模式-单件

    理解 1.       Singleton模式用来取代全局静态变量.C++通过静态成员变量来实现类实例全局唯一性. 2.       instance()方法是单件提供的唯一调用入口.   要点 1. ...

  8. 8数码，欺我太甚！<bfs+康拓展开>

    不多述,直接上代码,至于康拓展开,以前的文章里有 #include<iostream> #include<cstdio> #include<queue> using ...

  9. 标签（改变样式style）

    id可以换为class,class对应的名字可以多个一样 <div class="box">box1</div> <div class="b ...

  10. CF History（区间合并）

    这其实是一个简单的区间合并问题,但是我们第一交是过了,后来学长rejudge,我们又TLE了,这一下不仅耽误了我们的时间,也波动到了我们的心情,原先时间是2s,(原oj就是2s),后来改成了1s,我用 ...