三要素：宽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. mapreduce.framework.name

    mapreduce.framework.name默认是local: <property><name>mapreduce.framework.name</name>& ...

  2. oracle 函数大全及运算符

    http://blog.csdn.net/huangwuyi/article/details/7407820 一.函数 1.取整  mod(2,10)=2 2.取整 trunc(12/10)=1 3. ...

  3. c++ 关于new文件

    new文件用来管理c++的动态内存,这个文件声明了几个全局空间的函数(不是std空间的函数,全局空间的函数调用时是用全局作用域解析符),包括operator new 和operator delete的 ...

  4. UIView 的属性opaque详解

    该属性用法决定与该消息的接受者是否让其视图透明. 该属性的用处在于:给绘图系统提供一个性能优化开关. 当该值设计为YES,那么绘图系统会把它当作不透明看待,那么在执行绘图的时候会优化绘图一些操作,并且 ...

  5. eclipse安装color theme插件

    为Eclipse添加Color.Theme的插件 这样可以方便一键更换主题,再也不用一个一个设置BackgroundColor了,同时也方便回退到default默认主题配置. 方法一: 打开Eclip ...

  6. 【POJ】2420 A Star not a Tree?

    http://poj.org/problem?id=2420 题意:给n个点,求一个点使得到这个n个点的距离和最短,输出这个最短距离(n<=100) #include <cstdio> ...

  7. 【BZOJ1654】[Usaco2006 Jan]The Cow Prom 奶牛舞会 赤果果的tarjan

    Description The N (2 <= N <= 10,000) cows are so excited: it's prom night! They are dressed in ...

  8. 【Java】RuleSource约束常用方法整理

    1-常用约束规则RuleSource的设置方法   例如: addRules(new Rules(ProgramFeeItem.class){ protected void initRules() { ...

  9. uboot中添加FIQ中断及相关问题

    本文主要说明了在uboot中添加FIQ中断时遇到的问题以及对应的解决办法. 首先交代一下项目的软硬件环境.硬件方面,使用s3c2440作为主控芯片,外接串口.网卡等设备.软件方面,主控芯片上电后运行u ...

  10. nodejs入门（一）

    1.nodejs简介  Nodejs不是一个js应用.而是一个js运行平台. Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效 2. 1).Nodejs内置了一个HTTP模块 var ...