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还可 ...
随机推荐
- R语言读取本地文件注意事项
R里面应该用/,而不是\ ,或者用两个\\ R区分大小写,所以应该用C:,而不是c:
- JQ001-认识jQuery 和 JQ002-jQuery选择器
JQ001-认识jQuery jQuery环境配置:将jQuery.js文件引入到html页面中即可. 代码如下: <!DOCTYPE html> <html> <hea ...
- Jquery ui widget开发
Jquery ui 提供了一些基本的widget,但是他提供了很好的机制来创建widget.在jquery css framework中包含了基本的css样式(视觉和感觉诸如颜色,字体大小,图标等), ...
- 22章、Java集合框架习题
1.描述Java集合框架.列出接口.便利抽象类和具体类. Java集合框架支持2种容器:(1) 集合(Collection),存储元素集合 (2)图(Map),存储键值对.
- python 模块基础介绍
从逻辑上组织代码,将一些有联系,完成特定功能相关的代码组织在一起,这些自我包含并且有组织的代码片段就是模块,将其他模块中属性附加到你的模块的操作叫做导入. 那些一个或多个.py文件组成的代码集合就称为 ...
- <td valign="center" align="left">
单元格对齐方式:垂直居中,水平居左.
- git版本控制管理实践-3
git -m 和git -a -m(-am) . 的区别? usally two steps to commit files to respository: first, git add somefi ...
- phpcms v9图片生成缩略图变成黑色解决方法
今天客户反映,上传的图片生成缩略图有的图片变成黑色,出现问题就百度了一下,有不少网友也遇到这样的问题,但是官方论坛也没有给出解决办法,那还得靠自己解决了,于是就研究phpcms v9 图片压缩代码.打 ...
- PHP正则表达式详解（三）
1.preg_match() :preg_match() 函数用于进行正则表达式匹配,成功返回 1 ,否则返回 0 . 语法:int preg_match( string pattern, strin ...
- Asp.Net Core--基于角色的授权
翻译如下: 当创建身份时,它可以属于一个或多个角色,例如Tracy可以属于管理员和用户角色,而Scott可以仅属于用户角色. 如何创建和管理这些角色取决于授权过程的后备存储. 角色通过ClaimsPr ...