<!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. CF 486D vailid set 树形DP

    As you know, an undirected connected graph with n nodes and n - 1 edges is called a tree. You are gi ...

  2. NeHe OpenGL教程 第九课：移动图像

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  3. [物理学与PDEs]书中的错误指出

    记号意义: P--Page, 第几页; L--Line, 顺数第几行; LL--Last Line, 倒数第几行. P 64 L 1 ``15)'' should be ``14)''. P 70 L ...

  4. Mac下finder中无法关闭的小条

    就是这个恶心的小东西,根本无法关闭.其实就是在finder中无意中输入了中文导致的(不是按Alt+F , 就是打开finder然后输入中文) 可以通过继续输入中文然后按esc退出.也可以用下面的设置尽 ...

  5. repo安装

    repo是使用python开发的一个用于多版本管理的工具,可以和git协作,简化git的多版本管理. repo安装: 1.新建~/bin,并将此目录包含在path变量中(如果已存在,且已在path变量 ...

  6. Android牟利之道（一）--界面嵌入有米广告

    经过了一番折腾,忙忙碌碌了一下午,终于搞明白了Android软件界面嵌入广告的方法,以下我以嵌入有米广告为例小结一下: 我的新浪微博(wind瑞):http://weibo.com/tianrui19 ...

  7. php中soap的使用实例以及生成WSDL文件，提供自动生成WSDL文件的类库——SoapDiscovery.class.php类

    1. web service普及: Webservice soap wsdl区别之个人见解 Web Service实现业务诉求:  Web Service是真正“办事”的那个,提供一种办事接口的统称. ...

  8. scala环境搭建

    第一步:Java 设置 确保你本地以及安装了 JDK 1.5 以上版本,并且设置了 JAVA_HOME 环境变量及 JDK 的bin目录. 在 Mac 上安装 Java 下载 jre-8u65-mac ...

  9. 20145305 《Java程序设计》第8周学习总结

    教材学习内容总结 1.NIO使用频道来衔接数据节点,可以设定缓冲区容量,在缓冲区中对感兴趣的数据区块进行标记,提供clear().rewind().flip().compact()等高级操作 2.想要 ...

  10. 使用 cURL 获取站点的各类响应时间 – dns解析时间,响应时间,传输时间

    http://zhangrenfang8738.blog.163.com/blog/static/95401881201142711450245/ curl监控站点响应时间 2011-05-27 11 ...