我一直以为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. 红帽linux忘记root密码的配置

    1.启动linux,不停按上下键,注意鼠标要点击进去才行. 2.按e键. 3.选择kernel/....       再按e键 4.空格+single 按enter键. 5.按B键,进入root权限. ...

  2. Sea.Js使用入门

    1.Sea.Js是什么 seajs相对于RequireJs与LabJS就比较年轻,2010年玉伯发起了这个开源项目,SeaJS遵循CMD规范,与RequireJS类似,同样做为模块加载器.示例 // ...

  3. 转：WebDriver进行屏幕截图

    例: 打开百度首页 ,进行截图 01 packagecom.example.tests;  02 importjava.io.File;  03 importorg.apache.commons.io ...

  4. Java 8新特性探究（九）跟OOM：Permgen说再见吧

    PermGen space简单介绍 元空间(MetaSpace)一种新的内存空间诞生 PermGen 空间的状况 Metaspace 内存分配模型 Metaspace 容量 Metaspace 垃圾回 ...

  5. android 5.0新特性学习--RecyclerView

    在过去很多年,我们的PC或者手机设备都是采用拟物化的设计风格,IOS采用扁平化的特性,android在2014年IO大会上说采用Material Design的设计风格,显示效果不能过于生硬的转换,而 ...

  6. 第19章 网络通信----TCP程序设计基础

    TCP网络程序设计是指利用Socket类编写通信程序.利用TCP协议进行通信的两个应用程序是有主次之分的,一个称为服务器程序,另一个称为客户机程序,两者的功能和编写方法大不一样. 1.InetAddr ...

  7. 关于mysql 删除数据后物理空间未释放(转载)

    转自 关于mysql 删除数据后物理空间未释放(转载) - NETDATA - 博客园http://www.cnblogs.com/shawnloong/archive/2013/02/07/2908 ...

  8. Ubuntu vim显示行号语法高亮自动缩进

    配置文件名为Ubuntu vimrc在Fedora中vim的配置文件存放在/etc目录中,配置文件名为Ubuntu vimrc在终端 输入以下命令来编辑Ubuntu vimrc配置文件:sudo vi ...

  9. Java枚举的3类语法

    一.最基本的用法 public enum TestEnum { IMG,TEXT,WORD } 使用时: TestEnum testEnum=TestEnum.WORD; System.out.pri ...

  10. FTP详解

    概述 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”.用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Applicat ...