1.border-width:不支持百分比值

支持下面属性值：

thin:1px

medium:3px

thick:5px

2.border-style类型

solid:实线

dashed：虚线（方形） 兼容性问题

dotted：点线（圆点）

double：双线（双线宽度一定相同，中间区域+-1

inset:内凹（淘汰）

3.border-color和color（border-color的默认颜色是color)

案例：hover与图形变色

.add{

color:#ccc;

transition:clor .25s;

border:1 px solid}
.add:hover{

color:#06C;

}

4.border与background定位的局限

background定位的局限：只能相对于左上角

background-position{

left:50px;

40px;

}

相对于右上角？借助border

border-right{

50px solid transparent;

background-position:100% 40px;

}

5.画三角形

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

      #triangle{

          width:100px;

          height: 100px;

          border: 100px solid;

          border-color: red green blue orange;

      }

    </style>

</head>

<body>

<div id="triangle">

    </div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

      #triangle{

          width:0px;

          height: 0px;

          border: 100px solid;

          border-color: red green blue orange;

      }

    </style>

</head>

<body>

<div id="triangle">

    </div>

</div>

</body>

</html>

border的更多相关文章

  1. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  2. css样式之border

    border用法详解: 1.border-width 属性设置边框的宽度 可能的值:像素 2.border-style 属性设置边框的样式 可能的值:solid(直线),dashed(虚线),dott ...

  3. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  4. css3学习--border

    http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...

  5. border：none 和border：0区别差异

    border:none与border:0的区别体现为两点:一是理论上的性能差异,二是浏览器兼容性的差异. 性能差异: [border:0;]把border设为“0”像素效果等于border-width ...

  6. WPF 通过Border来画边框

    WPF有自己的表格控件DataGrid.ListBox等,如果只是简单的需求,可以通过Border控件来画边框. 比如我们需要给上面的控件加上边框. <Window x:Class=" ...

  7. css border属性做小三角标

    <!doctype html><html> <head> <title></title> <meta charset="ut ...

  8. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  9. iPhone 6/plus iOS Safari fieldset border 边框消失

    问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...

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

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

随机推荐

  1. JS各种方法

    一.JS(去掉前后空格或去掉所有空格)的用法 1.去掉字符串前后所有空格:代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ...

  2. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  3. JAVA关键字与保留字说明及使用

    1.abstract 2.boolean 3.break 4.byte 5.case 6.catch 7.char 8.class 9.continue 10.default 11.do 12.dou ...

  4. linux下实现在程序运行时的函数替换(热补丁)

    声明:以下的代码成果,是参考了网上的injso技术,在本文的最后会给出地址,同时非常感谢injso技术原作者的分享. 但是injso文章中的代码存在一些问题,所以后面出现的代码是经过作者修改和检测的. ...

  5. [Scala] 快学Scala A2L2

    集合 13.1 集合的三大类 所有的集合都扩展Iterable特质.集合的三大集合为Seq, Set, Map Seq是一个有先后次序的值的序列,比如数组或列表.IndexSeq允许我们通过整型下表快 ...

  6. lib库dll库的使用方法与关系

    一.lib库 lib库有两种:一种是静态lib(static Lib),也就是最常见的lib库,在编译时直接将代码加入程序当中.静态lib中,一个lib文件实际上是任意个obj文件的集合,obj文件是 ...

  7. Linux进程间通信（七）：消息队列 msgget()、msgsend()、msgrcv()、msgctl()

    下面来说说如何用不用消息队列来进行进程间的通信,消息队列与命名管道有很多相似之处.有关命名管道的更多内容可以参阅我的另一篇文章:Linux进程间通信 -- 使用命名管道 一.什么是消息队列 消息队列提 ...

  8. 如何 实现PHP多版本的 共存 和 切换？

    编译PHP时指定路径 ./configure --prefix=/opt/php/php-5.6 make && make install 这样可以PHP版本就可以安装到一个特别的路径 ...

  9. 小知识点总结HTML、CSS、JavaScript（一）

    1.给元素同时设置背景色和背景图的时候,当背景色写在背景图后面,背景色会覆盖背景图未覆盖的位置 如background:url(); background-color:red; 2.当需求一段文字右对 ...

  10. ubuntu下建立NFS共享，并用开发板挂载

    安装NFS服务 apt-get install nfs-kernel-server nfs-common apt-get install portmap 在/etc/exports里加入 /home/ ...