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. elasticsearch snapshot

    一.Repositories 在elasticsearch.yml文件中增加path.repo路径配置: $ vim /etc/elasticsearch/elasticsearch.yml path ...

  2. Google 地图 API V3 之控件

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  3. [Python & Machine Learning] 学习笔记之scikit-learn机器学习库

    1. scikit-learn介绍 scikit-learn是Python的一个开源机器学习模块,它建立在NumPy,SciPy和matplotlib模块之上.值得一提的是,scikit-learn最 ...

  4. 马化腾称春节前推出微信小程序

    腾讯马化腾在第二届深商大会“互联与时代”论坛上透露,会在2017年春节前推出微信小程序.在谈到“互联网+”.开放生态等话题时,马化腾表示,腾讯从过去5年来,从封闭的环境变成一个开放的环境,变成一个真正 ...

  5. shell--3.运算符

    1.注意 原生bash不支持简单的数学运算,但是可以用其它命令来实现如 awk 和expr ,expr最常用 val=`expr 2 + 3` echo "结果 ${val}" # ...

  6. linux常用命令-文件搜索命令-find

    find [目录] [选项] 文件名或者正则表达式 -name 根据文件名搜索 -iname 搜索文件名的时候忽略大小写 例:find /etc -name init     find /etc -i ...

  7. Factory 模式

    在面向对象编程中, 最通常的方法是一个new操作符产生一个对象实例,new操作符就是用来构造对象实例的.但是在一些情况下, new操作符直接生成对象会带来一些问题.举例来说, 许多类型对象的创造需要一 ...

  8. 各大搜索引擎智能提示API（JSONP跨域实现自动补全搜索建议）

    ---------------------------------------搜索引擎JSONP接口--------------------------------------------- 提示:U ...

  9. C#获取命令行输出内容的方法

    获取命令行输出内容的方式有传统和异步两种方式. 传统方式: public static void RunExe(string exePath, string arguments, out string ...

  10. server2003中看不到网上邻居内容，其他电脑无法通过计算机名和IP访问本计算机（但网上邻居中可访问到）

    现象1:server2003中看不到网上邻居内容,查看工作组计算机看到的是空列表, 现象2:其他电脑无法通过计算机名和IP访问本计算机(但网上邻居中可访问到)   访问提示:--Windows 200 ...