border
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的更多相关文章
- 理解CSS边框border
前面的话 边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...
- css样式之border
border用法详解: 1.border-width 属性设置边框的宽度 可能的值:像素 2.border-style 属性设置边框的样式 可能的值:solid(直线),dashed(虚线),dott ...
- 通过CSS的border绘制三角形
通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...
- css3学习--border
http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...
- border：none 和border：0区别差异
border:none与border:0的区别体现为两点:一是理论上的性能差异,二是浏览器兼容性的差异. 性能差异: [border:0;]把border设为“0”像素效果等于border-width ...
- WPF 通过Border来画边框
WPF有自己的表格控件DataGrid.ListBox等,如果只是简单的需求,可以通过Border控件来画边框. 比如我们需要给上面的控件加上边框. <Window x:Class=" ...
- css border属性做小三角标
<!doctype html><html> <head> <title></title> <meta charset="ut ...
- 使用border做三角形
网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...
- iPhone 6/plus iOS Safari fieldset border 边框消失
问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...
- 原来css中的border还可以这样玩
原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...
随机推荐
- OSI参考模型及各层功能，TCP与UDP的区别
OSI参考模型:ISO/IEC 7498标准定义了网络互联的7层结构模型,即开放系统互连参考模型. OSI参考模型定义了开放系统的层次结构.层次之间的相互关系,以及各层所包括的可能的服务.OSI的服务 ...
- Formal Definitions Using ASN.1 - SNMP Tutorial
30.7 Formal Definitions Using ASN.1 The SMI standard specifies that all MIB variables must be define ...
- Makefile 规则的使用
1.Makefile格式 //最终目标 all: led.o //依赖 arm-linux-ld -Tled.lds -o led.elf led.o //命令 arm-linux-objcopy - ...
- 网络基础知识之 Ping
========================================假定主机A的IP地址是192.168.1.1,主机B的IP地址是192.168.1.2,都在同一子网内,则当你在主机A上 ...
- HashMap Hasptable的区别
HashTable的应用非常广泛,HashMap是新框架中用来代替HashTable的类,也就是说建议使用HashMap,不要使用HashTable.可能你觉得HashTable很好用,为什么不用呢? ...
- 即时搜索或input实时检测监听输入框变化
js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...
- ThinkPhP 分页
<?php namespace User\Service; use Think\Controller; use Think\Exception; class UserService { // 每 ...
- PHP常用数据库代码汇总
连接MYSQL //MYSQL数据库配置 define(DB_HOST, '127.0.0.1'); define(DB_USER, 'user'); define(DB_PASS, 'pass'); ...
- nyoj 448 寻找最大数（贪心专题）
寻找最大数 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 请在整数 n 中删除m个数字, 使得余下的数字按原次序组成的新数最大, 比如当n=920813467185 ...
- [Operate System & Algorithm] 页面置换算法
页面置换算法是什么?我们看一下百度百科对页面置换算法给出的定义:在地址映射过程中,若在页面中发现所要访问的页面不在内存中,则产生缺页中断.当发生缺页中断时,如果操作系统内存中没有空闲页面,则操作系统必 ...