三要素：宽border-width，形状border-style，颜色border-color

<style>
div{
width:300px;
height:300px;
background:blue;
border:50px solid green;
}
</style>
<body>
<div>
盒模型
</div>
</body>

solid是实线的意思、

dashed是虚线、

dotted是点线；

形状有很多的……以上是对盒子的整体设置border，而对于一边，设置只需border-top或border-bottom，border-right，border-left。不管哪边，都是有三要素的；border-top-style：dashed……

<style>

div{

width:300px;
height:300px;
background:blue;
border-top-width:10px;
border-top-style:dashed;
border-top-color:green;
}
</style>
<body>
<div>
盒模型
</div>

盒模型中--border的更多相关文章

  1. 盒模型中padding、border、margin的区别

    在CSS中,规定了一种基本设计模型——盒模型(也叫框模型),如图所示: 其中包含了四部分内容:element/元素(即图中文字).padding/内边框(图中两个红色边框之间白色部分).border/ ...

  2. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  3. 10-[CSS]-盒模型：border，padding，margin

    1.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  4. 5.css3盒模型--margin/border/padding/content

    1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...

  5. 弹性盒模型中flex-grow 和flex的区别

    在flex弹性盒模型体系中,flex-grow和flex都有对子元素进行放大的作用,但是这两个属性在放大时的计算方法不同,在使用时候要注意,使用正确的放大属性,从而达到自己想要的效果. 先来看下两个属 ...

  6. 盒模型中的div居中

    说到居中的问题,或许大多数童鞋都会想到text-align:center; margin:0 auto; vertical-align:middle; line-height:height; ……的确 ...

  7. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  8. 前端（七）—— 盒模型之display、overflow、隐藏、border、margin、样式支持，层级结构

    display.overflow.隐藏.border.margin.样式支持,层级结构 一.盒模型之display 1.三种样式 block 块 inline 内联/行内 inline-block 内 ...

  9. 理解盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。

    一个元素盒模型的层次从内到外分别为:内边距.边框和外边距IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

随机推荐

  1. Android 情景模式设置

    情景模式的设置大家应当相当熟悉了,但是在Android中如何通过自己的程序进行情景模式的设置呢,情景模式分为多种多种,即可以使用系统自带的,也可 以使用自定义的,但是在开发某些程序时,可能需要在程序中 ...

  2. BZOJ3294: [Cqoi2011]放棋子

    Description   Input 输入第一行为两个整数n, m, c,即行数.列数和棋子的颜色数.第二行包含c个正整数,即每个颜色的棋子数.所有颜色的棋子总数保证不超过nm. Output 输出 ...

  3. IOS开发常用设计模式

    IOS开发常用设计模式 说起设计模式,感觉自己把握不了笔头,所以单拿出iOS开发中的几种常用设计模式谈一下. 单例模式(Singleton) 概念:整个应用或系统只能有该类的一个实例 在iOS开发我们 ...

  4. 20145330《Java程序设计》第二次实验报告

    20145330<Java程序设计>第二次实验报告 实验二 Java面向对象程序设计 实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承多态 3.初步掌握UM ...

  5. Eclipse IDE for C/C++ Developers安装配置详解

    Eclipse IDE for C/C++ Developers安装配置详解(转) 转自:http://hi.baidu.com/ltb6w/item/986532efd712460f570f1ddc ...

  6. css去掉使用bootstrap框架后打印网页时预览效果下的超链接

    在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...

  7. tomcat 设置根目录访问

    from http://nj-apple-tree.iteye.com/blog/1635953 1,设置跟路径时,三种方式 在Tomcat默认安装后,tomcat的主目录是webapps/root目 ...

  8. 多种方式实现在Android 手机上抓包

    一.素材来源 https://www.zhihu.com/question/20467503 二.方法整理 2.1 方式1:Packet Capture + HTTP Injector 使用于在手机端 ...

  9. Odoo Xml Datetime 类型显示为 Date类型

    <field name='date_order' widget='date'/> 利用date widget即可使dateime类型的显示为date.

  10. django1.9 创建数据表

    1.在setting.py 中注册app: 2.编写models.py 文件创建表结构: (生成的表默认是: app名称_定义的表面  ) 3.执行命令: python manage.py check ...