边框风格属性(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. visual asssit 过期提示

    把目录下的VA_X.dll文件复制到上面所说的文件夹下覆盖源文件即可 对于vs2010的朋友需要额外注意,使用2010的朋友,是需要覆盖到Visual Studio 2010的Visual Assis ...

  2. Spring3.0.6定时任务

    项目使用的Spring版本比较旧是3.0.6版本,由于需要进行定时任务,就决定使用Spring自带的scheduled task. 在网上找了很多文章,也查看了Spring3.0.6的官方文档,按照网 ...

  3. Linux系统上安装Python

    1.下载Python安装包,官网下:http://www.python.org/getit/ http://jingyan.baidu.com/article/eae07827f7f2d01fec54 ...

  4. VC远控（一）界面设计及套接字连接测试

    首先创建一个MFC项目. 选择基于对话框: 勾选Windows套接字 依次拉上各种不同的控件: Edit Control.Button.Tree.Static Text.List.Progress C ...

  5. 【LeetCode】228 - Summary Ranges

    Given a sorted integer array without duplicates, return the summary of its ranges. For example, give ...

  6. 使用Python拼接多张图片

    写机器学习相关博文,经常会碰到很多公式,而Latex正式编辑公式的利器.目前国内常用的博客系统,好像只有博客园支持,所以当初选择落户博客园.我现在基本都是用Latex写博文,然后要发表到博客园上与大家 ...

  7. bat面试总结

    bat是国内互联网行业的龙头老大,招聘要求自然也是互联网行业最高-面试过程一般考查四个方面:基础+算法+数据结构+项目. 基础:c/c++/java等语言基础,这个根据你应聘所选的语言来定(一般不会考 ...

  8. UDP广域网，局域网通信-原理分析，穿透技术

    一.UDP局域网通信. 这个比较简单,关于局域网中的2台或者更多的计算机之间的UDP通信,网络上一大把,直接复制粘贴就可以使用,原理也非常简单.所以,本文不做详细介绍. 二.UDP广域通信(包括路由器 ...

  9. HD4505小Q系列故事——电梯里的爱情

    Problem Description 细心的同事发现,小Q最近喜欢乘电梯上上下下,究其原因,也许只有小Q自己知道:在电梯里经常可以遇到他心中的女神HR. 电梯其实是个很暧昧的地方,只有在电梯里,小Q ...

  10. rdlc Report Viewer Configuration Error

    主要是web.config没有配置 方法参考http://msdn.microsoft.com/zh-cn/library/ms251661.aspx