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. 学习.Net的经典网站

    学习.Net的经典网站 收藏 还不错推荐给大家 原文-- 名称:快速入门 地址:http://chs.gotdotnet.com/quickstart/ 描述:本站点是微软.NET技术的快速入门网站, ...

  2. arcgis engine 监听element的添加、更新和删除事件（使用IMovePointFeedback）

    VB代码: 复制进程序稍作修改变量名和事件逻辑即可使用. Members   AllPropertiesMethodsInheritedNon-inherited Description Displa ...

  3. centos 7.0 编译安装php 5.6.7

    编译安装php参考资料 MySQL PHP API http://dev.mysql.com/doc/apis-php/en/index.html nginx + php +mysql 最简单安装 官 ...

  4. Twemproxy 缓存代理服务器

    Twemproxy 缓存代理服务器 Twemproxy 概述 Twemproxy(又称为nutcracker)是一个轻量级的Redis和Memcached代理,主要用来减少对后端缓存服务器的连接数.T ...

  5. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  6. python 3编码

    python 3和2很大区别就是python本身改为默认用unicode编码. 字符串不再区分"abc"和u"abc", 字符串"abc"默 ...

  7. JavaScript 冒泡排序和选择排序

    var array = [1,2,3,4,5]; // ---> 服务 //效率 ---> 针对一个有序的数组 效率最高 //标志 true false for(var j = 0; j ...

  8. PHP常用字符串的操作函数

    字符串转换类函数 addcslashes函数:以C语言风格使用反斜线转义字符串中的字符 addslashes函数:使用反斜线引用字符串 chop函数:清除字符串中的连续空格 get_html_tran ...

  9. HeapSort 堆排序 基于伪代码实现

    此文原创, http://www.cnblogs.com/baokang/p/4735431.html ,禁止转载 GIF 动态图 伪代码 /* From Wikipedia, the free en ...

  10. WCF

    --http://www.doc88.com/p-699300196010.html ---术语 WCF术语 消息(message) 消息是一个独立的数据单元,它可能由几个部分组成,包括消息正文和消息 ...