三要素：宽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. 几个Windows电脑小技巧

    1. 为cmd命令提示符设置默认的初始路径: 到开始菜单-附件-属性  里面有起始位置选项 其中%HOMEDRIVE%%HOMEPATH%就代表起始位置 如想每次键cmd进入命令提示符后的初始位置是 ...

  2. 怎样测试TCP&UDP端口

    TCP端口大家都知道,比如80端口,可以使用 telnet ip 80,来验证端口是否正常监听,那UDP端口是否可以同样测试呢?详细如下: 下面我们来进行测试,123端口是服务器42.11.12.13 ...

  3. [转]redis-cluster研究和使用--待研究

    转自:http://hot66hot.iteye.com/blog/2050676 一:关于redis cluster 1:redis cluster的现状 reids-cluster计划在redis ...

  4. 建立php开发环境(XAMPP + Xdebug+Zend Studio)

    1. 安装XAMPP和Zend Studio Zend Studio下载地址: http://pan.baidu.com/s/1o6BjvAE XAMPP 下载地址: http://pan.baidu ...

  5. CentOS 6.6 下配置软RAID5

    在虚拟机中增加4块5G的硬盘 安装依赖包 yum install -y parted mdadm 查看一下硬盘信息fdisk -l

  6. MongoDB 用户配置

    ====[安装]====DOS下切换到文件所在盘符 例如 D:\MongoDB\bin设置数据库保存位置 mongod.exe --dbpath D:\MongoDB\Data [--auth]//用 ...

  7. [译]FastClick: native-like tapping for touch apps

    原文地址:http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/ 这篇文章是一篇老文了,现在才看到,真是落后啊 ...

  8. 纪念逝去的岁月——C/C++冒泡排序

    冒泡排序 代码 #include <stdio.h> void printList(int iList[], int iLen) { ; ; i < iLen; i++) { pri ...

  9. 一个不错的安卓下ssh客户端

    1.使用安卓作为ssh客户端连接ssh服务器 软件名:JuiceSSH 版本   :1.4.8 大小   :4.22 M 百度网盘地址:JuiceSSH_1.4.8.apk  或 JuiceSSH_1 ...

  10. 李洪强iOS经典面试题上

    李洪强iOS经典面试题上     1. 风格纠错题 修改完的代码: 修改方法有很多种,现给出一种做示例: // .h文件 // http://weibo.com/luohanchenyilong/ / ...