<!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. Tomcat的ServletAPI与Jetty的不能混用,否则会出现Serlvt类无法编译

  2. ServletContext（重要）

    一个项目只有一个ServletContext对象! 我们可以在N多个Servlet中来获取这个唯一的对象,使用它可以给多个Servlet传递数据! 这个对象在Tomcat启动时就创建,在Tomcat关 ...

  3. 准备学一学go-lang啦 ~~ 学习Go应该用什么姿势？ ！

    go毕竟是新语言,没有那么多历史包袱,并且是google出品,c语言创始人为语言设计组成员,应该还是不错的. go天生具有并行能力,这个在现代服务器端编程领域作用很显而易见,高效服务,快速编码,适合互 ...

  4. CE_现金模组基本概念（概念）

    2014-07-12 Created By BaoXinjian

  5. 4 c#

    /直接小写transform表示获取当前脚本所挂载的游戏对象身上的Transform组件 Vector3 p= transform.position;//     transform组件上的位置属性 ...

  6. Altium Designer /DXP无网络铺铜：

    有的设计者在PCB加工的时候会删除网络以便为了保护.但如果后续在无网络PCB上进行修改时就不叫麻烦,没有网络连铺铜都无法进行.一般手动添加网络只对要铺铜的地网络进行,其它的要修改者自己确保版图的正确性 ...

  7. 如何开启ubuntu的SSH服务(不要和openssl搞混淆了)

    ubuntu默认并没有安装ssh服务,如果通过ssh链接ubuntu,需要自己手动安装ssh-server,然而SSH分客户端openssh-client和服务端openssh-server,open ...

  8. Ubuntu编写开机自启动脚本（转载）

    From:http://blog.csdn.net/marujunyy/article/details/8466255 1.首先编写一个简单的shell脚本test.sh #! /bin/bash e ...

  9. [Flex] Accordion系列-动态添加或删除Accordion容器中项目

    <?xml version="1.0" encoding="utf-8"?> <!--Flex中如何使用addChild()和removeCh ...

  10. CRM PrincipalObjectAccess(POA)

    PrincipalObjectAccess (POA) table is an important table which holds all grants share on CRM objects. ...