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. infix to postfix 完整版

    #include<iostream> #include<stack> #include<string> #include<deque> using na ...

  2. Excel教程(9) - 信息函数

    CELL   用途:返回某一引用区域的左上角单元格的格式.位置或 内容等信息,该函数主要用于保持与其它电子表格程序的兼容 性. 语法:CELL(info_type,reference) 参数:Info ...

  3. 深度探索C++对象模型之C++对象模型笔记

    0.菜鸟觉得,在看这本书的时候最好切换角色,把自己的思维转换成编译器开发者,去考虑问题,这样会容易理解些.(当然这样很难,就想着自己要解决什么样的问题好了) 1.在C++中,类的数据成员有两种:静态和 ...

  4. spring容器启动的加载过程(三)

    第十步: public class XmlBeanDefinitionReader extends AbstractBeanDefinitionReader { /** * Load bean def ...

  5. RegOpenKey(注册表定位器) 1.5 中文免费绿色版

    软件名称: RegOpenKey(注册表定位器) 1.5 中文免费绿色版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win7 / Vista / Win2003 / WinXP / Wi ...

  6. HttpServletResponse应用----生成验证码

    1.1生成随机图片用作验证码 生成图片主要用到BufferedImage类 package gacl.response.study;import java.awt.Color;import java. ...

  7. xml 和json 数据格式及解析

    来源:http://blog.jobbole.com/79252/ 引言 NOKIA 有句著名的广告语:“科技以人为本”.任何技术都是为了满足人的生产生活需要而产生的.具体到小小的一个手机,里面蕴含的 ...

  8. 从MySQL全库备份中恢复某个库和某张表【转】

    从MySQL全库备份中恢复某个库和某张表 一.全库备份-A [root@mha2 backup]#mysqldump -uroot -p123456 --default-character-set=u ...

  9. “psql: could not connect to server: Connection refused” Error when connecting to remote database

    问题: I am trying to connect to a postgres database installed in a remote server using the following c ...

  10. 1.Perl 多线程:Threads

    详情可查看: perldoc threads 调用线程的方法: $thr = threads->create(FUNCTION, ARGS) #This will create a new th ...