三要素：宽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. Excel: 公式

    单元格内输入  = xx公式 e.g  =EXACT(C2,D2)   //比较两个单元格内的文本是否相同

  2. ios 关于[xxx timeIntervalSinceNow]出现EXC_BAD_ACCESS错误的解决办法

    [xxx timeIntervalSinceNow]出现EXC_BAD_ACCESS错误的主要原因是之前的[NSDate date]返回一个autoreleased的NSdata,其被释放掉 解决方法 ...

  3. linux 远程桌面的配置

    root根用户登录在/root目录下#rpm -q vnc vnc-server查询已安装vnc的客户端和服务器端vnc-4.1.1-36vnc-server-4.1.1-36 #vi /etc/sy ...

  4. ActiveMQ 即时通讯服务——浅析

    一. 概述与介绍 ActiveMQ 是Apache出品,最流行的.功能强大的即时通讯和集成模式的开源服务器.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provide ...

  5. JavaScript笔记——this的取值

    有关ECMAScript定义如何获取this请移步ECMAScript中关于如何获取this的定义 绝大多数情况下,函数的调用方式决定了this的取值 全局上下文 console.log(this = ...

  6. 递归merge排序

    package sort; import java.io.BufferedReader; import java.io.InputStreamReader; import java.util.Scan ...

  7. [LintCode] Evaluate Reverse Polish Notation 计算逆波兰表达式

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  8. 解决mysql5.6+在zabbix监控中执行脚本出现密码的错误问题

    1.mysql命令行中授权mysql监控所需的账号和密码(权限select权限即可) 2.通过mysql_config_editor 配置登录问题: [root@back_zabbix_100 scr ...

  9. mysql语句 索引操作

    创建索引:(help create index;) CREATE INDEX indexName ON tableName(Coll,Coll....); ALTER TABLE tableName ...

  10. typeof操作符在javascript中运用时时页面上的操作数显示

    typeof可以告诉我们它的操作数是一个字符串(string).数值(number).函数(function).布尔值(boolean)或对象(object). 1.字符串(string) alert ...