<!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. ADO.NET（查询、属性扩展）

    一.ADO.NET 融合面向对象的查询语句 1.只查询一条数据 //数据访问中的select方法 public stu select(string xuehao) { stu s = null; cm ...

  2. 远程调用jboss as 7上部署的ejb出现No EJB receiver available for handling 异常

    昨天倒腾了一天终于配置好了jboss as 7的域,今天又倒腾了一整天在上面部署了个EJB,然后试了一个利用JNDI来进行远程调用.下面记录一下过程中那些乱七八糟的问题: 首先是这个jboss-cli ...

  3. Linux设置服务自启动（转载）

    From:http://www.cnblogs.com/nerxious/archive/2013/01/18/2866548.html 有时候我们需要Linux系统在开机的时候自动加载某些脚本或系统 ...

  4. Oracle迁移MySQL笔记

    1,--在oracle代表注释 ,mysql/* */,# 2,|| oracle里面是表示连接符号,比如 A||B 那么就是AB 3,databaseLink创建好之后,比如名字为db_link_b ...

  5. 写代码的自动提示是怎么出来的...我的WebStorm中不能自动提示Bootstrap中的样式呢

    首先开启自动提示 File -> Settings ->Editor ->Code Completion ->Preselect the first suggestion:,将 ...

  6. [ASP.NET]动态绑定树控件：

    public void BindTree(TreeView tview, TreeNode tn_main, string parentId,string sql) { TreeNode tn=nul ...

  7. [SQL]SQL语言入门级教材_SQL语言快速入门（五）

    SQL语言快速入门(一) SQL是英文Structured Query Language的缩写,意思为结构化查询语言. SQL语言的主要功能就是同各种数据库建立联系,进行沟通.按照ANSI(美国国家标 ...

  8. 网络编程socket

    socket socket解释 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄. 应用程序通常通过"套接字"向网络发出请求或者应答 ...

  9. mssqlserver 批量插入示例

    public bool DoQuestionSqlBulkCopy(DataTable dtDoQuestion,             string DoQuestionName,         ...

  10. post from传值

    //请求            string url = "http://localhost:50186/GetPostPage.aspx";            HttpWeb ...