1.边框（border）

　　常用表达

　　border-width　　px

thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。

　　border-style　　dotted定义点状边框。在大多数浏览器中呈现为实线。     solid定义实线。　　double定义双线。双线的宽度等于 border-width 的值。　　groove定义 3D 凹槽边框。其效果取决于 border-color 的值。

　　border-color　　

color_name 规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent 默认值。边框颜色为透明。
inherit 规定应该从父元素继承边框颜色。
border 在一个声明中设置所有的边框属性。 1
border-bottom 在一个声明中设置所有的下边框属性。 1
border-bottom-color 设置下边框的颜色。 2
border-bottom-style 设置下边框的样式。 2
border-bottom-width 设置下边框的宽度。 1
border-color 设置四条边框的颜色。 1
border-left 在一个声明中设置所有的左边框属性。 1
border-left-color 设置左边框的颜色。 2
border-left-style 设置左边框的样式。 2
border-left-width 设置左边框的宽度。 1
border-right 在一个声明中设置所有的右边框属性。 1
border-right-color 设置右边框的颜色。 2
border-right-style 设置右边框的样式。 2
border-right-width 设置右边框的宽度。 1
border-style 设置四条边框的样式。 1
border-top 在一个声明中设置所有的上边框属性。 1
border-top-color 设置上边框的颜色。 2
border-top-style 设置上边框的样式。 2
border-top-width 设置上边框的宽度。 1
border-width 设置四条边框的宽度。 1

　　例1：

 <html>

     <head>

         <title>div.1</title>

         <style type="text/css">

             div{width:500px;height:300px;background-color:#eee;

             border-bottom-width:5px;

             border-bottom-style:dotted;

             border-bottom-color:red;

             border-left-width:10px;

             border-left-style:dotted;

             border-left-color:green;

             border-top-width:20px;

             border-top-style:dotted;

             border-top-color:red;

             border-right-width:30px;

             border-right-style:dotted;

             border-right-color:blue;

             }

         </style>

     </head>

     <body>

         <div>

             asdfghjkl

         </div>

     </body>

 </html>

　　例2:

 <html>

     <head>

         <title>div.2</title>

         <style type="text/css">

             .class1{width:500px;height:300px;line-height:300px;

                     color:blue;font-size:30px;background-color:red;

                     border:15px solid green;

                     text-align:center;

             }

             .class2{width:400px;height:400px;line-height:400px;

                     background-color:#aaa;

                     color:red;font-size:;px;text-align:center;

                     border:20px dotted blue;

             }

         </style>

     </head>

     <body>

         <div class="class1">

             asdfghjkl

         </div>

         <div class="class2">

             sdnhfajkhfjksdhfu

         </div>

     </body>

 </html>

　　例3：

 <html>

     <head>

         <title>div</title>

         <style type="text/css">

             div{width:500px;height:300px;background-color:#eee;

             border-bottom-width:5px;

             border-bottom-style:solid;

             border-bottom-color:red;

             border-left-width:10px;

             border-left-style:solid;

             border-left-color:green;

             border-top-width:20px;

             border-top-style:solid;

             border-top-color:red;

             border-right-width:30px;

             border-right-style:solid;

             border-right-color:blue;

             }

         </style>

     </head>

     <body>

         <div>

             asdfghjkl

         </div>

     </body>

 </html>

2.div

　　<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

　　<div> 元素的另一个常见的用途是文档布局。

　　

HTML+CSS D07 边框、div的更多相关文章

  1. CSS之边框覆盖

    今天想做一个淘宝导航来练练手,遇到了边框覆盖的问题.如下图: li的红色边框盖不住该灰色边框.后来问经验人士告诉我,这种边框覆盖是会出现无法100%保证正常的情况,遂得到如下3中解决方案: 1.以后遇 ...

  2. 用css控制一个DIV画图标。

    在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...

  3. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  4. HTML&CSS基础-边框简写属性

    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...

  5. CSS渐变色边框，解决border设置渐变后，border-radius无效的问题

    需求:用css设置渐变边框通过border-image来实现渐变色边框 <div class="content"></div> .content { wid ...

  6. CSS学习笔记--Div+Css布局（div+span以及盒模型）

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  7. 第50天学习打卡（CSS 圆角边框 盒子阴影 定位）

    4.4圆角边框 圆角边框:  <!DOCTYPE html> <html lang="en"> <head>     <meta char ...

  8. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  9. DIV+CSS常见问题：DIV如何设置一个像素高度？

    CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-s ...

随机推荐

  1. js技巧之this,call,apply

    具体到实际应用中,this的指向又可以分为以下四种: 作为对象的方法调用 作为普通函数调用 构造器调用 apply和call调用 接下来我们去剖析前3点,至于第4点的apply和call调用,会在ca ...

  2. priority_queue 优先队列

    优先队列是单向队列的一种,可以按照默认或自定义的一种方式来对队列中的数据进行动态排序 template<class _Ty, class _Container = vector<_Ty&g ...

  3. ajax传递的数据类型json传递

    $(".del_goods").click(function(){ //删除选中的商品 var clear_data = [];//数组 $("input[name='c ...

  4. jqgird 实践

    $.jgrid.defaults.styleUI="Bootstrap"; $("#table_list_2").jqGrid({ multiselect: t ...

  5. Python笔记1-20151021

    一.字符串和字符编码 字符 ASCII Unicode UTF-8 A 01000001 00000000 01000001 01000001 中 x 01001110 00101101 111001 ...

  6. windows xp sp3 下载地址

      windows xp service pack 3/ windows xp sp3 简体中文版下载地址: http://download.windowsupdate.com/msdownload/ ...

  7. WPF类层次结构

    WPF类层次结构 System.Threading.DispatcherObject类 WPF应用程序使用STA(Single Thread Affinity)模型,整个用户界面由一个单独的线程拥有, ...

  8. Linux相关

    可以用secureCRT远程连接Linux系统,进入tomcat,并且启动tomcat:bin/startup.sh 查看实时日志状态:tail -f logs/catalina.out

  9. Class.forName和ClassLoader.loadClass的比较

    文章出处:http://blog.csdn.net/wikijava/article/details/5576043 Class的装载分了三个阶段,loading,linking和initializi ...

  10. 第一次点击button, view视图出现；第二次点击button，view视图消失

    主要思想:点击一下按钮选中Yes,View出现,再点击一下选中为No  view消失