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. python 网络编程

    一.网络知识的一些介绍 socket是网络连接端点.例如当你的Web浏览器请求www.pythontik.com上的主页时,你的Web浏览器创建一个socket并命令它去连接www.pythontik ...

  2. Unicode, UTF, ASCII, ANSI format differences

    Going down your list: "Unicode" isn't an encoding, although unfortunately, a lot of docume ...

  3. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. Oracle 图形化以及命令行安装

    @(Oracle)[Install] Oracle 安装 相关版本说明 不同版本的Oracle需要安装在特定的系统版本之上. 如Oracle 11gR2的11.2.0.1.0需要安装在CentOS 5 ...

  5. TCP中的RST复位信号

    TCP中的RST复位信号 在TCP协议中RST表示复位,用来关闭异常的连接,在TCP的设计中它是不可或缺的. 发送RST包关闭连接时,不必等缓冲区的包都发出去,直接就丢弃缓存区的包发送RST包.而接收 ...

  6. PHP连接mysql数据库，并将取出的数据以json的格式输出

    <?php error_reporting(E_ALL || ~E_NOTICE); header("Access-Control-Allow-Origin:*");//此处 ...

  7. shell--4.echo和printf

    1. echo (1) echo ,显示普通字符串 echo "HelloWorld" 打印:HelloWorld (2) \ ,显示转义字符串 echo "\" ...

  8. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  9. 【Python基础学习三】数字（Number）

    Python Number 数据类型用于存储数值. 数据类型是不允许改变的,这就意味着如果改变 Number 数据类型的值,将重新分配内存空间. Python 四种数值类型: 整型(Int) - 通常 ...

  10. erlang 200w进程测试

    参照<programing erlang>书例子,测试erlang创建进程性能 创建N个进程 都wait,然后挨个发送die关闭进程,代码如下: 测试场景:200w进程.MacBook P ...