div边框的定义方法
div边框的正确定义方式如下:
border:1px solid #3399FF;
要指定边框的宽度、样式和颜色值,边框才能显示出来。只指定边框的宽度,边框是不会显示出来的。如果将这三个值分开定义,边框不一定能显示出来,显示出来也不一定是所期望的。
CSS border边框属性教程(color style)
一、CSS 边框基础知识 - TOP
CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。同时大家可以进入DIVCSS5提供CSS手册查看border手册:http://www.divcss5.com/shouce/c_border.shtml DIV+CSS边框border知识教程篇
二、Html原始边框与DIV+CSS边框对照 - TOP
Html表格控制边框: border="1" bordercolor="#000000" 说明:控制表格边框宽度为1px,css颜色为黑色,默认为实线样式边框。
三、border边框语法 - TOP
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单独设置左边框、右边框、上边框、下边框 - TOP
以缩写方式写上、下、左、右边框单独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
五、常用推荐边框样式 - TOP
我们通常使用主流浏览器兼容边框样式有:
1、实线边框:solid Border:1px solid #000 设置对象1px(像素)宽厚的黑色实线边框。
2、虚线边框:dashed Border:1px dashed #000 设置对象1px(像素)宽厚的黑色虚线边框。
六、css border边框用处 - TOP
设置对象边框样式,设置单独上边框、下边框、左边框、右边框样式,实现美化美观。边框起到分割、规划布局作用。
七、border边框样式优化简写图文教程 - TOP
CSS border边框属性语法结构分析图(简写优化的边框border)
八、css边框应用案例代码 - TOP
描述:为了观察案例效果我们设置一个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总结 - TOP
我们使用DIV CSS设置边框border样式,一般我们使用简写表达式进行设置对象边框border样式,这样节约代码简化代码作用。无论是单独设置一个边的边框还是四边边框,我们都尽量缩写方式简写CSS边框代码,CSS 边框优化简写,常见对对象设置CSS样式使用属性代码:border:1px solid #000;。
十一、三边有边而一边没有设置技巧 - TOP
如左右下有边框并且样式为黑色1PX宽度实线边框,而上边没有边框。
CSS 代码: border:1px solid #000; border-top:none; 注意border:1px solid #000; 和border-top:none;前后顺序不能调换。因为CSS读取有从上到下、从左到右读取原理,而先设置了整个边框样式,后再加上声明顶部上边边框为“none”没有意思,即实现该实例要的样式。从而无需分别设置下、左、右,从而节约一定代码。
转自 http://www.divcss5.com/rumen/r120.shtml
转载于:https://www.cnblogs.com/fan-yishan/p/3575179.html
div边框的定义方法相关推荐
- html div 阴影效果,css实现div边框阴影效果的方法
在CSS2的时代,我们多半使用图片实现类似效果,或是使用CSS其他属性模拟阴影效果,但是,现在,CSS3的崛起使得这个问题已经不再是是个问题了,本文就将展示如何实现跨浏览器的盒阴影效果. .div_s ...
- php里面怎么设置边框颜色,css怎么设置div边框颜色
css设置div边框颜色的方法:首先创建一个HTML示例文件:然后定义一个div:最后通过给该div添加"border-color"或者"border-left-colo ...
- html中不显示竖线边框代码,DIV用CSS定义边框为实线,但为什么预览的时候不显示。...
DIV用CSS定义边框为实线,但为什么预览的时候不显示.以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! DIV用CSS定 ...
- html div 边框只显示右侧,div 边框原来有这么多种设置方法
在HTML前端斥地中,有数次会对 配置边框. 这里 给DIV加一个边框方式教程,实现div边框款式.经由CSS border花样属性实现加边框. 如下是各类给DIV加分歧边框实例与才具教程.html代 ...
- div html隐藏边框,div 边框原来有这么多种设置方法
在HTML前端开发中,有数次会对 配置边框. 这里 给DIV加一个边框方式教程,实现div边框花色.通过CSS border花式属性完成加边框. 下列是各类给DIV加差距边框实例和技能花样教程.htm ...
- div中的table内容过多时不超出div的范围解决方法
转载自 div中的table内容过多时不超出div的范围解决方法 问题描述: 在做界面展示时,table的内容过多,超出div的大小,看着table的边框盖过了div的边框,不美观. 问题解决: ...
- html字体外围有黄色边框,input或textarea在chrome、safari浏览器点击获得焦点时出现黄色边框去掉的方法...
1.input或textarea在chrome.safari浏览器点击获得焦点时出现黄色边框去掉的方法 input{ outline:0;} outline 定义和用法 outline (轮廓)是绘制 ...
- html 最小边框宽度,div边框粗细
Html 中如何设置 div边框的颜色 DIV里怎么控制表格的边框颜色和粗细? 我想在DIV里嵌套表格,请问怎么通过CSS定义DIV里表格的样式? 感觉上你对DIV的概念不是很明确,你可以应用clas ...
- html solid 属性,html solid属性 Html 中如何设置 div边框的颜色
麻烦家说下.它般都用在何处?? 是指css border-tyle 吧1.none:表示没 2.solid:表示单线 3.double:表示双线 4.groove:表示凹槽 5.redge:表示皱纹 ...
最新文章
- DeepFake疑遭审查
- 一个很简短的 JS 生成器入门和用法参考
- nodejs 单元测试
- hdu2602 Bone Collector-01背包问题
- Win2003远程桌面报错:RPC错误 解决办法
- 机械表小案例之transform的应用
- Shell笔记5——函数的知识与实践
- JAVA文件传输原理及介绍—狂神说
- 使用Resource Hacker 实现替换exe图标的
- 短视频从业者实操资料大全(含代运营案例+报价单+合同协议 +分镜头脚本+管理运营)共180份
- c语言return后面有没有分号,为什么末尾加return 0;}反而不能通过?(符号英文半角,分号没漏)...
- 数据分析实践——如何搭建数据指标体系(抖音为例)
- reflections歌词翻译_Reflections 歌词
- 计算机应用基础评分标准及评分细则,《计算机应用基础》评分标准(范文).doc
- 《计算机网络--自顶向下方法》第三章--运输层
- xx-xx-xx-xx转换成x年x月x日星期x
- SMARTY安装与使用
- SpringBoot的Bean Definition 生成过程(源码分析)
- 计算机三级网络技术最全知识点总结【2】
- 定位程序Crash常用工具和方法
热门文章
- 飞桨常规赛:黄斑中央凹定位(GAMMA挑战赛任务二) - 11月第3名方案
- SQL压缩日志操作步骤
- 卧槽,又一款Python神器
- 开关电源环路稳定性分析(06)-功率级和控制级
- 关于虚拟机复制/移动/克隆已有镜像发生无法上网的情况。
- 嵌入式工控机主板在自动售货机的应用
- 两篇文章带你走入.NET Core 世界:CentOS+Kestrel+Ngnix 虚拟机先走一遍(一)
- 网管软件怎么用?网管软件使用
- 面部表情识别1:表情识别数据集(含下载链接)
- LTMC导入损益类科目报错:消息号FH002 “损益报表账户类型 P未定义”