<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         div{width: 100px;height: 100px;margin-top:50px; display: inline-table;}

         div:nth-child(){border:5px solid red;}

         div:nth-child(){border:5px ridge red;}

         div:nth-child(){border:5px outset red;}

         div:nth-child(){border:5px inset  red;}

         div:nth-child(){border:5px groove red;}

         div:nth-child(){border:5px double red;}

         div:nth-child(){border:5px dotted red;}

         div:nth-child(){border:5px dashed red;}

     </style>

 </head>

 <body>

 <div>solid(单实线边框）</div>

 <div>ridge(有着凸出来效果的边框）</div>

 <div>outset(使内容有凸出来效果的边框）</div>

 <div>inset(使内容有凹陷效果的边框）</div>

 <div>groove(有着凹陷效果的边框)</div>

 <div>double（双实线边框）</div>

 <div>dotted(虚线边框）</div>

 <div>dashed(粗线边框）</div>

 </body>

 </html>

css的border效果的更多相关文章

  1. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  2. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  3. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  4. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  5. CSS 的 border 样式

    制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色, ...

  6. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  7. IE7,8纯css实现圆角效果

    众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang= ...

  8. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  9. 一种巧妙的使用 CSS 制作波浪效果的思路

    在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思 ...

随机推荐

  1. ERP_基于Oracle ADF的定制化企业级IT系统解决方案

    2014-12-31 Created By BaoXinjian

  2. C++模板元编程 - 3 逻辑结构，递归，一点列表的零碎，一点SFINAE

    本来想把scanr,foldr什么的都写了的,一想太麻烦了,就算了,模板元编程差不多也该结束了,离开学还有10天,之前几天部门还要纳新什么的,写不了几天代码了,所以赶紧把这个结束掉,明天继续抄轮子叔的 ...

  3. 深入ThreadLocal之二

    概述 相信读者在网上也看了很多关于ThreadLocal的资料,很多博客都这样说:ThreadLocal为解决多线程程序的并发问题提供了一种新的思路:ThreadLocal的目的是为了解决多线程访问资 ...

  4. Python进阶09 动态类型

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 谢谢TeaEra, 猫咪cat 动态类型(dynamic typing)是Pyth ...

  5. vi命令的使用

    <转:http://linux.vbird.org/linux_basic/0310vi.php> 基本上 vi 共分为三种模式,分别是『一般模式』.『编辑模式』与『指令列命令模式』. 圖 ...

  6. ddl语句

  7. CentOS 安装 Chrome

    cd  /etc/yum.repos.d/ vi  google.repo [gogle] name=Google-x86_64 baseurl=http://dl.google.com/linux/ ...

  8. 使用Aspose.Words把 word转成图片

    Document doc = new Document("f:\\333.doc"); ImageSaveOptions iso = new ImageSaveOptions(Sa ...

  9. sap mm_1

    1. /nmm50 扩展视图,看那些视图没有维护的  . 2. mm60 物料清单    查看所建立的物料. 3. se11     ABAP DICTIONARY:Initial Screen 定义 ...

  10. (转）C#序列化和反序列化小例子

    网友关于序列化和反序列化的总结: ①序列化基本是指把一个对象保存到文件或流中,比如可以把文件序列化以保存到Xml中,或一个磁盘文件中 ②序列化以某种存储形式使自定义对象持久化: ③将对象从一个地方传递 ...