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. Spring Security（13）——session管理

    1.1     检测session超时 1.2     concurrency-control 1.3     session 固定攻击保护 Spring Security通过http元素下的子元素s ...

  2. POJ 2054 Color a Tree#贪心（难，好题）

    题目链接 代码借鉴此博:http://www.cnblogs.com/vongang/archive/2011/08/19/2146070.html 其中关于max{c[fa]/t[fa]}贪心原则, ...

  3. shell初学

    超简单的一段shell代码,查看电脑属性,删除无效安装包,查看天气.FYI  #!/bin/bash echo -e '\n' echo "Hello,`whoami`" echo ...

  4. Bootstrap介绍

    Bootstrap是基于HTML.CSS和JavaScript开源的前端开发工具包. 1.响应式布局: 效果:根据浏览器的宽度来调整页面布局. 例如: <html lang="en&q ...

  5. 使用 mulan-1.5.0 如何构造.arff文件

    1. 为什么要使用mulan 我用mulan来做多标签数据的分类,但是mulan的输入数据由两个文件控制,一个是data.arff文件,这个文件列出的所有的属性以及这些属性值的类型和他们对应的值.la ...

  6. Java 内部类和匿名内部类

    1.内部类: /* 局部内部类: 在一个类 的方法内部定义另外一个类,那么另外一个类就称作为局部内部类. 局部内部类要注意的细节: 1. 如果局部 内部类访问了一个局部变量,那么该局部变量必须使用fi ...

  7. Gentoo:Xorg:Failed to load module "……" 问题

    错误描述: 安装完xorg-server后,startx启动桌面环境,出现缺少模块错误. Xorg:Failed to load module "--" 查看log: cat /v ...

  8. 飞雪桌面日历软件 V8.6 免费绿色版

    软件名称: 飞雪桌面日历软件软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP / Win2008软件大小: 4MB图片预览: 软件简介: ...

  9. 2.4 chrome 开发者工具

    开发者工具顶部有Elements.Console.Network等八个栏目.常用的有三个:Elements,用来查看需爬取字段的HTML标签信息:Console,可以检测你的JS代码:Network, ...

  10. jquery1.8.3和1.11.3的用法区别

    学习js啦dom的对象 发现好复杂 不够简洁 所以我就用法强大的jquery来做功课 突然就遇到attr的方法对复选属性的checked取不了值 给我返回undefined 我查好久都没查出问题 结果 ...