如何给div加一个边框样式?

对div盒子加一个边框样式很简单只需要使用border板块样式即可。

一、虚线与实线边框

边框虚线样式:dashed
边框实现样式:solid

border:1px dashed #000
代表设置对象边框宽度为1px黑色虚线边框

border:1px solid #000
代表设置对象边框宽度为1px黑色实现边框

二、对div上边加边框

我们给div上边加1px黑色边框

div{border-top:1px solid #} 

三、给div底部加边框

给div盒子底部加2px虚线红色边框

div{border-bottom:2px dashed #F00} 

四、在div盒子左侧加边框

给一个css选择器 css命名为“.divcss5”盒子左侧加一个蓝色1px实线边框

.divcss5{ border-left:1px solid #00F} 

DIV代码:

<div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div> 

五、在盒子div右侧加边框

div对象右侧加1px红色实线边框

div{ border-right:1px solid #F00} 

六、在盒子上下加边框

给盒子上下加1px实现黑色边框

div{border-top:1px solid #;border-bottom:1px solid #} 

七、给div盒子左右加边框

给盒子左右加2px虚线绿色边框

div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0} 

八、给div四边加上一个边框

给一个DIV四边加上3px实现黑色边框

div{ border:3px solid #} 

以上是如何给一个div加边框,各种加边框样式方法教程。根据需要对选择器进行重新命名,即可使用class或id在html的div引入调用,灵活运用并掌握对一个对象加边框样式方法。

如何给div加一个边框border样式的更多相关文章

  1. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  2. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  3. html div 加边框样式

    边框虚线样式:dashed边框实现样式:solid border:1px dashed #000代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #000代表设置对象边框宽度 ...

  4. div加边框

    一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px dashed #000 代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #0 ...

  5. Bootstrap3基础 img-thumbnail 给图片加一个圆角的边框

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  6. css美化Div边框的样式实例

    很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px solid #96c2f1;backgrou ...

  7. css美化Div边框的样式实例*(转载)

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  8. DIV+CSS颜色边框背景等样式

    1.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两 ...

  9. word中几个好用的宏代码(立方米上标、关闭样式自动更新、删除无效样式、表格加粗边框、宋体引号)

    Sub 替换立方米() With Selection.Find .Text = "m3" .Replacement.Text = "mm3" .Forward ...

随机推荐

  1. 关于TXT转CHM的完整解决方式

    为什么要转CHM? 有些书,TXT的资源非常好找,而CHM的资源非常难找(先不论PDF格式的,只是话说PDF格式的没有一个书签文件夹看起来也非常难受) 而CHM格式在左側有一个文件夹结构,我最喜欢这个 ...

  2. Ant学习笔记(1) 基础知识

    Ant Apache Ant 是一个基于 Java的构建工具. 下载Ant google.baidu.Windows用户下载zip格式.解压即可. Windows安装Ant Ant本质上是一个Java ...

  3. Apache本地环境下出现循环重定向

    最近发现一个很奇怪的问题,用了很久的apache+php访问项目,昨天突然不行了,出现了这个 然后我一点点测试,我用的是TP框架,Indexaciton的index中调用框架里的一个redirect函 ...

  4. oracle中drop、delete和truncate的区别

    oracle中drop.delete和truncate的区别 oracle中可以使用drop.delete和truncate三个命令来删除数据库中的表,网上有许多文章和教程专门讲解了它们之间的异同,我 ...

  5. Mac下载并编译Google安卓AOSP项目代码

    Mac下载并编译Google安卓AOSP项目代码 参考 https://source.android.com/source/index.html 这两天用Mac下载安卓AOSP源码,且把遇到的问题记下 ...

  6. idea+maven

    使用IntelliJ IDEA开发SpringMVC网站(一)开发环境 http://my.oschina.net/gaussik/blog/385697 使用IntelliJ IDEA开发Sprin ...

  7. VS中监视窗口,即时窗口和输出窗口的使用

    一.监视窗口 1.配置应用程序,使应用程序处于调试状态. 2.点击“调试”----“窗口”----“监视”----“监视1”,打开监视窗口. 3.在监视窗口中“名称”栏中输入变量名称或html元素id ...

  8. GUID是什么意思及Guid在sqlserver中的使用

    GUID(全球唯一标识)是微软使用的一个术语,由一个特定的算法,给某一个实体,如Word文档,创建一个唯一的标识,GUID值就是这个唯一的标识码.GUID广泛应用于微软的产品中,用于识别接口.复制品. ...

  9. Oracle实用技巧

    一. ORACLE SQL PLUS 使用技巧: ----①查找重复记录: SELECT DRAWING, DSNOFROM EM5_PIPE_PREFABWHERE ROWID!= (SELECT ...

  10. (java)从零开始之--装饰者设计模式

    装饰者设计模式:简单定义:增强一个类的功能,而且还可以让这些装饰类互相装饰. 应用场景:当要在某个功能的基础上扩充功能,并且扩充的功能具有大量排列组合,通过继承关系会衍生出大量子类,这时候用装饰者模式 ...