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权威指南学习总结--8.3 函数的实参和形参》

    内容要点: 一.可选形参 当调用函数的时候传入的实参比函数声明时指定的形参个数要少,剩下的形参都将设置为undefined值. 例如: //将对象o中可枚举的属性名追加至数组 //如果省略a,则创建一 ...

  2. C#连接sqlserver数据库

    // 混合登录 写法1:Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername;Password=myPas ...

  3. setsockopt、getsockopt详细介绍（转）

    本文只讲解socket编程中的 setsockopt.getsockopt两个函数.关于其它函数的介绍可以参考下面链接:http://blog.sina.com.cn/s/blog_a459dcf50 ...

  4. Openjudge-计算概论（A）-晶晶赴约会

    描述 晶晶的朋友贝贝约晶晶下周一起去看展览,但晶晶每周的1.3.5有课必须上课,请帮晶晶判断她能否接受贝贝的邀请,如果能输出YES:如果不能则输出NO. 输入输入有一行,贝贝邀请晶晶去看展览的日期,用 ...

  5. javascript焦点图左右按钮简单自动轮播

    这里把css和html合在一块写了,这块代码只是布局和样式不是重点 <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. c# 操作word demo

    /// <summary> /// 新创建word /// </summary> /// <param name="fileSaveDirectory" ...

  7. 正则表达式：reg.test is not a function

    正则中 比如 var reg = "/^[0-9]$/" 会报 reg.test is not a function 如果 var reg = /^[0-9]$/ 就不会有错 因为 ...

  8. mac中Eclipse的快捷键

    查看某个类:command + shift +T 快速查看源代码中方法: command + o 选中某个类,command + t:查看此类的父类和子类 如果要导入一个类所在的包名,可以选中这个类, ...

  9. 《JavaScript高级程序设计》读书笔记 ---执行环境及作用域

    执行环境及作用域 执行环境(execution context,为简单起见,有时也称为“环境”)是JavaScript 中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了它们各自 ...

  10. 【第五篇】androidEventbus源代码阅读和分析之unregister代码分析

    代码里面注销eventbus一般我们会在onDestory里面这么写: EventBus.getDefault().unregister(this); 然后走到unregister里面去看看: /** ...