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. PostgreSQL ----- No relations found.

    本篇文章可能有错,尚未细细研究 运行\d出错: No relations found. \d只显示可见的表,也就是该数据库的schema在search_path中. SHOW search_path; ...

  2. hdu_5286_wyh2000 and sequence(分块)

    题目链接:hdu_5286_wyh2000 and sequence 题意: 给一段长度为N的序列,每次询问l-r(l和r和上一次询问的答案有关)内 不同的数的 出现次数的次方 的和.强制在线 题解: ...

  3. Markdown 基础

    How to use Markdown H1 text. H2 text. H3 text. H4 text. H5 text. H6 text. Text This is italic text. ...

  4. ESFramework 4.0 进阶（04）－－ 驱动力：通信引擎（下）

    在ESFramework 4.0 进阶(03)-- 驱动力:通信引擎(上)一文中,我们对ESFramework提供的每一个通信引擎的接口都做了详细了说明,这篇文章我们将继续探讨这些接口的实现类 -- ...

  5. php使用iconv进行从utf-8转为gb2312字符编码出错或截断的解决方案

    iconv("GB2312","UTF-8",$text);修改为以下其中一种:1.iconv("UTF-8","GBK" ...

  6. JavaScript加减计算方法和显示千分位

    Math.formatFloat = function (f, digit) { var m = Math.pow(10, digit); return parseInt(f * m, 10) / m ...

  7. Arch安装fcitx输入法

    安装fcitx,安装gtk.qt模块. [root@ARCH ~]# pacman -S fcitx-im :: There are 4 members in group fcitx-im: :: R ...

  8. ckeditor 插件

    dialog 下面 建立一个 插件.js CKEDITOR.dialog.add("about", function (a) { var aaa = "<form& ...

  9. javacript参数传递表单验证

    <!doctype html> <html> <head> <meta charset="utf-8"> <style typ ...

  10. iOS中的触摸事件，手势识别，摇晃事件等

    在iOS中,事件可以划分为以下几类: 1.触摸事件:通过触摸,手势进行触发(手指点击.缩放等) 2.运动事件:通过加速器触发(例如手机晃动) 3.远程控制事件:通过其他远程设备触发(例如耳机控制按钮) ...