边框风格属性(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. [转]Linux文件权限详解

    转自:http://blog.chinaunix.net/uid-25052030-id-174343.html 在linux中的每一个文件或目录都包含有访问权限,这些访问权限决定了谁能访问和如何访问 ...

  2. [转]LoadRunner参数化详解

    http://www.cnblogs.com/fnng/archive/2012/06/22/2558900.html 距离上次使用loadrunner 已经有一年多的时间了.初做测试时在项目中用过, ...

  3. APP测试时不可忽视搭建代理服务器抓包测试的必要性

    这几天测的一个app,后台从已有服务器搬迁到了阿里云,接口api之类的都没有变化,但测试时发现客户端始终无法使用,每次点击都无法获得服务器反馈 用python编写脚本调接口,没问题,返回数据一切正常, ...

  4. 初识 istringstream、ostringstream、stringstream 运用

    今天编程练习时遇到了istringstream的用法,感觉很实用.后面附题目! C++的输入输出分为三种: (1)基于控制台的I/O (2)基于文件的I/O (3)基于字符串的I/O 1.头文件  # ...

  5. MVC5 - ASP.NET Identity登录原理 - Claims-based认证和OWIN -摘自网络

    在Membership系列的最后一篇引入了ASP.NET Identity,看到大家对它还是挺感兴趣的,于是来一篇详解登录原理的文章.本文会涉及到Claims-based(基于声明)的认证,我们会详细 ...

  6. cocos2d-x在android中响应返回键编译报错的bug分析

    先看一段代码如何在Android中加入返回按键的响应 <span style="font-size:18px;">自己派生CCKeypadDelegate的子类,然后注 ...

  7. TCP包头

    每发一个包,不论大小协议头会占用一定的空间 TCP头20字节,IP头20字节,MAC头14字节,共54字节 //Mac头部,总长度14字节  typedef struct _eth_hdr  {    ...

  8. New Objective-C Feature

    [Advance Objective-C Feature] 1.@import避免反复解析头文件,本地宏对框架API定义无影响. 2.可以导入单独一个头文件. 3.使用了@import后,不再需要选择 ...

  9. 在PhpStorm9中与Pi的xdebug进行调试

    PI的配置参考 http://www.cnblogs.com/yondy/archive/2013/05/01/3052687.html 在PhpStorm 9.0中参考下面的截图进行配置 配置完成以 ...

  10. poj 1273 Drainage Ditches（最大流）

    http://poj.org/problem?id=1273 Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Subm ...