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还可 ...
随机推荐
- 个人学习记录2：ajax跨域封装
/** * 跨域提交公用方法 * @param param 参数 * @param url 跨域的地址 * @param callFun 回调函数 callFun(data) */ function ...
- CSS复习
CSS 选择器 p.into 表示带有into类的p元素 伪类: a) first-line b) last-line 伪元素: :before 能在指定的元素前添加内容(创造 ...
- Spring-----定时任务Quartz配置
第一种,作业类继承自特定的基类:org.springframework.scheduling.quartz.QuartzJobBean. 第一步:定义作业类 import org.quartz.Job ...
- 创建NetWorkDataset---FileGDB篇
/// <summary> /// 创建NetWorkDataset /// </summary> /// <returns>INetworkDataset.< ...
- centos6.7设置非root帐户自动登录
1.在/etc/gdm/custom.conf文件中修改并加入以下这段 [daemon]AutomaticLogin=你的用户名AutomaticLoginEnable=True 2.重启 reboo ...
- css3 动画效果 定义和绑定执行
首先要定义一个动画效果 keyframes 关键字 这里动画效果执行完毕后 恢复本身的css样式 有的动画效果 移动到位置 要保持 就需要写好css 元素的位置 css里直接写 (这里是一般的 ...
- Pandas-数据选取
Pandas包对数据的常用数据切片功能 目录 [] where 布尔查找 isin query loc iloc ix map与lambda contains DataFrame的索引选取 [] 只能 ...
- hadoop源码编译——2.5.0版本
强迫症必治: WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using b ...
- C和指针 第九章 字符串 字符 字节
C语言中没有字符串类型,字符串是以NUL结尾的字符数组组成的. 高级字符串查找: //计算字符串起始部分,有多少字符是在group中 size_t strspn(char const * str, c ...
- iOS开发——高级篇——iPad开发、iPad开发中的modal
一.iPad简介 1.什么是iPad一款苹果公司于2010年发布的平板电脑定位介于苹果的智能手机iPhone和笔记本电脑产品之间跟iPhone一样,搭载的是iOS操作系统 2.iPhone和iPadi ...