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. SDL 显示解码后的yuv12数据

    在上篇h264解码为yuv12后http://jhlong12345.blog.163.com/blog/static/1230631292015725115058709/ ,需要显示出来,使用sdl ...

  2. 【转载】Python与ArcGIS Engine的集成

    本文转载自Fransico<Python与ArcGIS Engine的集成>   1 在Python中调用AO类库 1.1  准备工作 本文所使用环境:ArcGIS 10.0.Python ...

  3. Google Map API Version3 ：代码添加和删除marker标记

    转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...

  4. 启动网卡报:Device eth0 does not seem to be present”解决办法

    Device eth0 does not seem to be present”解决办法 : 用ifconfig查看发现缺少eth0,只有lo:用ifconfig -a查看发现多出了eth1的信息. ...

  5. [Redis]发布/订阅

    摘要 有这样的一个场景,管理员需要发布一条消息,所有的客户端都要受到通知.然后想到了发布订阅模式.使用redis的发布与订阅实现起来更简单一些,说做就做,这里弄个简单的demo,先模拟下. 核心代码 ...

  6. 【Bootstrap】Bootstrap-select多选下拉框实现

    目录 前言 需要引用的它们 核心选项 核心方法 实例应用 回到顶部 前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomor ...

  7. tyvj1193 括号序列

    描述 定义如下规则序列(字符串):1．空序列是规则序列:2．如果S是规则序列,那么(S)和[S]也是规则序列:3．如果A和B都是规则序列,那么AB也是规则序列.       例如,下面的字符串都是规则 ...

  8. UI第十六节——UITabBarController详解

    一.UITabBarController主要用来管理你提供的content view controllers,而每一个 content view controller则负责管理自己的view层级关系, ...

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

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

  10. 解决Xftp经常断开连接的问题，Xftp中文乱码

    #文件 --> 选项 --> 勾选“发送保持活动状态消息” 间隔 60秒 #工具 -> 选项 延伸阅读: Xshell个性化设置,解决Xshell遇到中文显示乱码的问题