CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色、边框样式、边框宽度的语法结构与应用案例教程篇
一、CSS 边框基础知识
CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。同时大家可以进入码农教程提供CSS手册查看border手册:http://www.manongjc.com/cssref/pr_border.html
二、Html原始边框与DIV+CSS边框对照
Html表格控制边框:
border="1" bordercolor="#000000"
说明:控制表格边框宽度为1px,css颜色为黑色,默认为实线样式边框。
三、border边框语法
1、四个边框
border-left 设置左边框,一般单独设置左边框样式使用
border-right 设置右边框,一般单独设置右边框样式使用
border-top 设置上边框,一般单独设置上边框样式使用
border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
2、四边相同边框border简写
#divcss5{border:1px solid #00F}
设置了divcss5对象盒子1px像素蓝色实线边框
3、边框三个样式
通常我们可以对边框设置宽度(厚度)、边框样式、边框颜色这三个属性与参数。
1)、边框颜色:border-color:#000
2)、边框厚度(宽度):border-width:1px
使用数字+单位设置边框厚度宽度,如1px(边框厚度宽度为1像素),边框必须为正数字,大于0的数值。否则设置边框border样式无效。
3)、border边框样式:border-style:solid
边框样式值如下:
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
solid : 实线边框(常用)
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
4)、边框样式截图:
边框border-style样式效果图
四、CSS单独设置左边框、右边框、上边框、下边框
以缩写方式写上、下、左、右边框单独CSS样式设置方法
1、1px黑色虚线上边框
border-top:1px dashed #000
2、1px黑色实线下边框
border-bottom:1px solid #000
3、1px黑色虚线左边框
border-left:1px dashed #000
4、1px黑色实线右边框
border-right:1px solid #000
五、常用推荐边框样式
我们通常使用主流浏览器兼容边框样式有:
1、实线边框:solid
Border:1px solid #000 设置对象1px(像素)宽厚的黑色实线边框。
2、虚线边框:dashed
Border:1px dashed #000 设置对象1px(像素)宽厚的黑色虚线边框。
六、css border边框用处
设置对象边框样式,设置单独上边框、下边框、左边框、右边框样式,实现美化美观。边框起到分割、规划布局作用。
七、border边框样式优化简写图文教程
CSS border边框属性语法结构分析图(简写优化的边框border)
八、css边框应用案例代码
描述:为了观察案例效果我们设置一个css宽度为200px,css高度1px,红色实线边框的DIV盒子
CSS代码:
#divcss5{height:100px;width:200px;border:1px solid #F00}
HTML代码对应片段:
<div id="divcss5">我的高度为100px,宽度为200px</div>
九、css border边框案例截图 - TOP
边框border样式应用示范案例截图
十、css边框border总结
我们使用DIV CSS设置边框border样式,一般我们使用简写表达式进行设置对象边框border样式,这样节约代码简化代码作用。无论是单独设置一个边的边框还是四边边框,我们都尽量缩写方式简写CSS边框代码,CSS 边框优化简写,常见对对象设置CSS样式使用属性代码:border:1px solid #000;。
十一、三边有边而一边没有设置技巧
如左右下有边框并且样式为黑色1PX宽度实线边框,而上边没有边框。
CSS 代码: border:1px solid #000; border-top:none;
注意border:1px solid #000; 和border-top:none;前后顺序不能调换。因为CSS读取有从上到下、从左到右读取原理,而先设置了整个边框样式,后再加上声明顶部上边边框为“none”没有意思,即实现该实例要的样式。从而无需分别设置下、左、右,从而节约一定代码。
参考阅读:
http://www.manongjc.com/article/1196.html
http://www.manongjc.com/article/1197.html
http://www.manongjc.com/article/1198.html
http://www.manongjc.com/article/1199.html
CSS border边框属性教程(color style)的更多相关文章
- CSS之边框属性
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式. border-style:dotted solid double dashed; border-style的属 ...
- 教你玩转CSS border(边框)
边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 border-style的值 代码演示: <!DOCTYPE html> <html ...
- border边框属性
边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...
- [CSS]border边框
border: 1px solid #ccc; /*1像素 实线 灰色*/可分割成:border-width:1px;border-style: solid; border-color: #00 ...
- border——边框属性
一.第一层次(复合样式) <style> p.one{border:1px solid black;} /*边框:1像素 实心的 黑色:*/ </style> <body ...
- 用CSS border相关属性画三角形
效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0J ...
- css border
CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS bord ...
- CSS的背景属性和边框属性
CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...
- css3设置边框属性
css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
随机推荐
- 无法访问 MemoryStream 的内部缓冲区
无法访问 MemoryStream 的内部缓冲区 在处理剪贴板数据时, ms.GetBuffer() 语句出现异常,代码如下: //检索当前位于系统剪贴板中的数据 IDataObject ido = ...
- App Transfer:苹果允许iOS App从一个开发者帐号转至另一个开发者账号
App Transfer:苹果允许iOS App从一个开发者帐号转至另一个开发者账号 苹果在WWDC上宣布超过30万的开发者为iOS平台开发超过90万的应用,你可能会想到有人想出售或者购买app. 现 ...
- windows运行打开服务命令
1. gpedit.msc-----组策略 2. sndrec32-------录音机 3. Nslookup-------IP地址侦测器 4. explorer-------打开资源管 ...
- Flume-NG源码阅读之Interceptor(原创)
有的时候希望通过Flume将读取的文件再细分存储,比如讲source的数据按照业务类型分开存储,具体一点比如类似:将source中web.wap.media等的内容分开存储:比如丢弃或修改一些数据.这 ...
- ORA-10922 Temporary tablespace group is empty错误
错误--练习查询,发现报错: SQL> select * from range_list_part_tab where id=100000Execution Plan------------- ...
- Loj 2536 解锁屏幕
Loj 2536 解锁屏幕 状态比较显然的状压 \(dp\) ,设 \(f[S][i]\) 表示连接 \(S\) 集合中的点,最后到的点是 \(i\) 的方案数. 转移时,枚举一个 \(j\notin ...
- ruby -检查json数据类型
HashObj={","language"=>"zh","make"=>"Apple"," ...
- 一个不错的nomad raw_exec && docker 运行例子(集成访问网关)
github 上有一个关于nomad up && runing 不错的项目,包含了一个tomcat 应用的部署,以及基于容器运行的网关服务 项目参考地址 https://github. ...
- TensorFlow学习线路
如何高效的学习 TensorFlow 代码? 或者如何掌握TensorFlow,应用到任何领域? 作者:黄璞链接:https://www.zhihu.com/question/41667903/ans ...
- Java调用.Net WebService参数为空解决办法 (远程)调试webservice方法
同事遇到一个很囧的问题,java调,netwebservice的时候,调用无参数方法成功,调用有参数的方法每次我这边的webservice日志都记录参数为空,而我自己.Net程序调用完全没有问题,后面 ...