边框风格属性(border-style) 
　　这个属性用来设定上下左右边框的风格，它的值如下：

　　none (没有边框，无论边框宽度设为多大)

　　dotted (点线式边框)

　　dashed (破折线式边框)

　　solid (直线式边框)

　　double (双线式边框)

　　groove (槽线式边框)

　　ridge(脊线式边框)

　　inset (内嵌效果的边框)

　　outset (突起效果的边框)

　　示例：分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例

<html>
<head>
<title>边框风格属性 border-style </title>
<style type="text/css">
.d1 {border-style:none;}
.d2 {border-style:solid;}
.d3 {border-style:dotted;}
.d4 {border-style:dashed;}
.d5 {border-style:double;}
.d6 {border-style:groove;}
.d7 {border-style:ridge;}
.d8 {border-style:inset;}
.d9 {border-style:outset;}
</style>
</head>
<body>
<div>这个div的CSS边框风格(border-style)属性缺省值是none。</div>
<br>
<div class = "d1">这个div的CSS边框风格(border-style)属性是none。</div>
<br>
<div class = "d2">这个div的CSS边框风格(border-style)属性是solid。</div>
<br>
<div class = "d3">这个div的CSS边框风格(border-style)属性是dotted。</div>
<br>
<div class = "d4">这个div的CSS边框风格(border-style)属性是dashed。</div>
<br>
<div class = "d5">这个div的CSS边框风格(border-style)属性是double。</div>
<br>
<div class = "d6">这个div的CSS边框风格(border-style)属性是groove。</div>
<br>
<div class = "d7">这个div的CSS边框风格(border-style)属性是ridge。</div>
<br>
<div class = "d8">这个div的CSS边框风格(border-style)属性是inset。</div>
<br>
<div class = "d9">这个div的CSS边框风格(border-style)属性是outset。</div>
<br>
</body>
</html>

这个div的CSS边框风格(border-style)属性缺省值是none。

这个div的CSS边框风格(border-style)属性是none。

这个div的CSS边框风格(border-style)属性是solid。 直线式边框

这个div的CSS边框风格(border-style)属性是dotted。点线式边框

这个div的CSS边框风格(border-style)属性是dashed。 破折线式边框

这个div的CSS边框风格(border-style)属性是double。 双线式边框

这个div的CSS边框风格(border-style)属性是groove。槽线式边框

这个div的CSS边框风格(border-style)属性是ridge。脊线式边框

这个div的CSS边框风格(border-style)属性是inset。内嵌效果

这个div的CSS边框风格(border-style)属性是outset。 突起效果

div 中如何加各种边框（转）的更多相关文章

  1. div中的内容水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  2. div中的“内容”水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  3. 如何给div加一个边框border样式

    如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...

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

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

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

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

  6. Bootstrap3基础 table-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深

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

  7. 使用CSS设置背景图片，图片比较大，完全显示在一个DIV中

    做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...

  8. MVC中实现加载更多

    需要实现的功能: 数据太多想初次加载部分数据,在底部加上“加载更多”按钮 点击后加载第二页数据(从数据库只取指定页数据)后接在已有数据后面(类似于android中的下拉加载更多) 每次加载时显示“正在 ...

  9. “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

    最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...

随机推荐

  1. winform 防止多開

    場景: 當我們的電腦可以使用多用戶同時登錄時候,每個使用者只允許執行一次exe程式. 例如:一台公用電腦,有多個用戶A.B. 當用戶A進入系統第一次運行C:\XX.exe,OK.第二次運行XX.exe ...

  2. 十六进制字符串转化成字符串输出HexToStr（Delphi版、C#版）

    //注意:Delphi2010以下版本默认的字符编码是ANSI,VS2010的默认编码是UTF-8,delphi版得到的字符串须经过Utf8ToAnsi()转码才能跟C#版得到的字符串显示结果一致. ...

  3. xcode import<xx/xx.h> 头文件报错

    最近一直在写Android程序,有点久没用xcode,在写一个项目准备把 UI7Kit导进去,将iOS 7的界面适配到低版本的时候,出现了这么一个蛋疼的问题.稍微查了一下,新建项目的时候想先做一个li ...

  4. Bluebird-Collections

    Promise实例方法和Promise类核心静态方法用于处理promise或者混合型(mixed)promise和值的集合. 所有的集合实例方法都等效于Promise对象中的静态方法,例如:someP ...

  5. Java Web高性能开发(三)

    今日要闻: Clarifai:可识别视频中物体 最近几年,得益于深度学习技术的发展,谷歌和Facebook等企业的研究人员在图形识别软件领域取得了重大突破.现在,一家名为Clarifai的创业公司则提 ...

  6. MySql数据备份与恢复小结

    方法1 备份 .sql" FROM 表名; 恢复 .sql" INTO TABLE 表名; 补充几个设置 1. FIELDS TERMINATED BY ',' #字段间隔符2. ...

  7. CSRF简单介绍及利用方法-跨站请求伪造

    0x00 简要介绍 CSRF(Cross-site request forgery)跨站请求伪造,由于目标站无token/referer限制,导致攻击者可以用户的身份完成操作达到各种目的.根据HTTP ...

  8. linux 从命令行自动识别文件并将其打开的命令

    若是shell是 zsh,则可: 使用 alias -s 定义后缀别名 (zsh) % alias -s pl=perl % script.pl perl script.pl % alias -s p ...

  9. <转>Linux环境进程间通信（三）

    原文链接:http://www.ibm.com/developerworks/cn/linux/l-ipc/part3/index.html 原文内容: 消息队列(也叫做报文队列)能够克服早期unix ...

  10. (转载)Java里快如闪电的线程间通讯

    转自(http://www.infoq.com/cn/articles/High-Performance-Java-Inter-Thread-Communications) 这个故事源自一个很简单的想 ...