<!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. IGS_学习笔记08_IREP通过soapUI测试客户化Web Service调用（案例）

    20150819 Created By BaoXinjian

  2. curl 同时发送多个请求

    // 创建一对cURL资源 $ch1 = curl_init(); $ch2 = curl_init(); // 设置URL和相应的选项 curl_setopt($ch1, CURLOPT_URL, ...

  3. 常见的http头信息

    请求头:用于告诉服务器,客户机支持的数据类型 accept-charset:用于告诉服务器,客户机采用的编码 accept-Encoding:用于告诉服务器,客户机支持的数据压缩格式 Host:客户机 ...

  4. JAVA中日期处理

    一.日期和long类型数据的相互转换 public class Hello { public static void main(String[] args) throws Exception { // ...

  5. Java SE 第十六讲----方法重载

    1.方法重载(Overload):表示两个或多个方法名字相同,但方法参数不同 不同:1)参数个数不同: 2)参数类型不同: 注意:方法的返回值对重载没有任何影响 2.构造方法重载,只需看参数即可.如果 ...

  6. 屏幕分辨率与FPS

    屏幕分辨率 刷新率分为垂直刷新率和水平刷新率,一般提到的刷新率通常指垂直刷新率. 垂直刷新率表示屏幕的图象每秒钟重绘多少次,也就是每秒钟屏幕刷新的次数,以Hz(赫兹)为单位. 刷新率越高越好,图象就越 ...

  7. Ext 4.2以后版本 ComboBox 联动

    //combox树 ComboTree: function (upDep, empStore) { var com = Ext.create('Ext.ux.desktop.ComboTree', { ...

  8. [kuangbin带你飞]专题二十 斜率DP

            ID Origin Title   20 / 60 Problem A HDU 3507 Print Article   13 / 19 Problem B HDU 2829 Lawr ...

  9. CCParticleSystem粒子系统

    欢迎转载!转载时请注明出处:http://write.blog.csdn.net/postedit/8124781 第一次接触粒子系统,以前游戏里面的一些小特效,像制作动画一样,是采用一帧一帧的切出来 ...

  10. Hbase基础操作

    $HBASE_HOME/bin/hbase org.apache.hadoop.hbase.mapreduce.RowCounter 'tablename'