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:表示皱纹 ...
最新文章
- 戏说Linux商用数据库
- 解决 Illegal DefaultValue null for parameter type integer 异常
- 查询oracle的联机日志文件,查询Oracle日志文件的方法(摘自http://database.51cto.com/art/201010/231519.htm)...
- Qt Creator使用Git
- 以POST方式下载文件
- Android项目技术总结:项目中选择任务的联系人引出android的spinner的监听问题
- vue+element【后台案例 · 搜集 · 集锦】
- 检测到在集成的托管管道模式下不适用的ASP.NET设置
- 面向对象的3个基本要素和5个基本设计原则(整理)
- PHP获取windows登录用户名的方法
- 【iCore4 双核心板_ARM】例程二十九:SD_IAP_FPGA实验——更新升级FPGA
- Linux下mysql数据库的自动备份与还原 远程备份和本地备份
- 元宇宙链游OAS即将正式上线,社区热度只增不减
- .Net Core微服务化ABP之六——处理Authentication
- 我知道的几个免费的API数据接口
- ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接
- 电磁兼容(EMC)测试
- java mongodb 查询 游标_MongoDB find()方法:查询数据
- 使用Excel和OutLook实现自动发送邮件
- 【装机】老毛桃的安装及使用教程
热门文章
- 端口转发可以发不同网段的吗?_海康威视网络硬盘录像机怎么跨网段添加摄像机?跨网段添加监控头...
- 一篇文章把 InnoDB 的事务机制给你弄的明明白白
- 和计算机有关的学校活动,有关大学生电脑节活动策划书
- 基于 unicorn 的 IDA 轻量级插件 uEmu 模拟执行汇编代码
- 青莲晚报 | 物联网安全多知道(第八期)
- python项目源码 日程管理_基于fullcalendar制作的日程管理小demo
- 撰写搜索引擎喜欢的标题
- 求大于等于(小于等于)一个整数最小2次幂算法
- 会议交流 | 欢迎注册 CCKS2021 全国知识图谱与语义计算大会!
- 面部表情识别2:Pytorch实现表情识别(含表情识别数据集和训练代码)