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还可 ...
随机推荐
- sqlalchemy默认时间
我查到的sqlalchemy默认时间有2种: from sqlalchemy.sql import func time_created = Column(DateTime(timezone=True) ...
- Node.js入门笔记（3）：全局对象（2）
buffer 用于更好操作二进制数据,他是一个全局变量.类似数组. var a=new Buffer(); buffer类的三种实现 第一种创建方式 new Buffer(size);size[Num ...
- Solr学习总结（四）Solr查询参数
今天还是不会涉及到.Net和数据库操作,主要还是总结Solr 的查询参数,还是那句话,只有先明白了solr的基础内容和查询语法,后续学习solr 的C#和数据库操作,都是水到渠成的事.这里先列出sol ...
- Git 学习笔记参考
1.参考学习资料 网上资料: http://www.cnblogs.com/aoguren/p/4189086.html http://www.liaoxuefeng.com/wiki/0013739 ...
- TransactionScope 之分布式配置
.Net开发过程中,涉及多个数据库和不同数据库的分布式事务(Distributed Transaction)开发,有时会碰到“与基础事务管理器的通信失败”的错误.导致这个错误一般有下列三个原因:1) ...
- UI第九节——UIStepper
- (void)viewDidLoad { [super viewDidLoad]; // 实例化UIStepper,大小是固定的 UIStepper *stepper = ...
- 数位dp模板
#include <bits/stdc++.h> typedef long long LL; const int MOD = (int)1e9 + 7; LL L,R,G,T; int d ...
- 利用session_set_save_handler()函数将session保存到MySQL数据库中
PHP保存session默认的是采用的文件的方式来保存的,这仅仅在文件的空间开销很小的windows上是可以采用的,但是如果我们采用uinx或者是liux上的文件系统的时候,这样的文件系统的文件空间开 ...
- 《UNIX网络编程(第3版)》unp.h等源码文件的编译安装
操作系统:Mac OS X 10.11.5 1.下载书中的源代码:点击下载 2.切换到解压后的目录 unpv13e,先查看下 README,依次执行: ./configure cd lib make ...
- ReactiveCocoa源码拆分解析(四)
(整个关于ReactiveCocoa的代码工程可以在https://github.com/qianhongqiang/QHQReactive下载) 上一章节简要的说明了如何实现的热信号.但是像那么写, ...