<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         .box{

             width:300px;

             height: 390px;

             background-color:pink;

              border-top-style:solid;/* 线型 */

             border-top-color:red;/* 上边框颜色 */

             border-top-width:5px;/* 上边框粗细 */

             border-bottom-style:dotted;/* 点线 */

             border-bottom-color:blue;

             border-left-style:dashed;/* 虚线 */

             border-left-color:#467890;

             /* 四个边框都一样 */

             border:5px solid blue;

         }

     </style>

 </head>

 <body>

     <div class="box">距离</div>

 </body>

 </html>

css盒子模型：
1.边框 border
 border-top-style（线型）:solid(实线)
         　　　　　　　　　dotted(点线)
         　　　　　　　　   dashed(虚线)
 border-top-color（边框颜色）
 border-top-width(边框粗细)

2.边框属性简写：
 border-top:5px solid red;
 特点：没有顺序限制.线型为必写项
 四个边框相同的时候写法：
 border：5px solid red
 特点：没有顺序要求。线型为必写项

css盒子模型之边框的更多相关文章

  1. CSS -- 盒子模型之边框、内边距、外边距

    一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...

  2. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  3. css盒子模型之边框宽度，边框颜色与边框样式

    /* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...

  4. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  5. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  6. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

  7. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  8. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  9. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

随机推荐

  1. 网络协议TCP/IP、IPX/SPX、NETBEUI简介

    网络中不同的工作站,服务器之间能传输数据,源于协议的存在.随着网络的发展,不同的开发商开发了不同的通信方式.为了使通信成功可靠,网络中的所有主机都必须使用同一语言,不能带有方言.因而必须开发严格的标准 ...

  2. SpringBoot整合Mail

    前言 SpringBoot实现邮件功能是非常的方便快捷的,因为SpringBoot默认有starter实现了Mail. 发送邮件应该是网站的必备功能之一,什么注册验证,忘记密码或者是给用户发送营销信息 ...

  3. firadisk 把 win7（32位） 装入 VHD ：仅仅支持内存模式：--mem

    关键1:对于 win7(32位)来说,还可以在设备管理器内,通过添加“过时”硬件的方式导入wvblk驱动. 附件: grub4dos firadisk驱动

  4. [Tensorflow] Object Detection API - retrain mobileNet

    前言 一.专注话题 重点话题 Retrain mobileNet (transfer learning). Train your own Object Detector. 这部分讲理论,下一篇讲实践. ...

  5. Invalid file name: must contain only [a-z0-9_.]【Android报错】

    Invalid file name: must contain only [a-z0-9_.][Android报错] 如: `[2012-02-07 09:58:14 - EmergencyRespo ...

  6. day1 一、编程语言与计算机五大组成部分

    一.编程与编程语言 1.什么是编程语言 语言是一个事物与另一个事物沟通的介质. 编程语言是程序员与计算机沟通的介质. 2.什么是编程 编程就是程序员按照某种编程的语法规范将自己想让计算机做的事情表达出 ...

  7. db2 v9.7 新特性cur_commit 能够实现未提交读新特性cur_commit 能够实现未提交读

    db2 get db cfg|find "CUR_COMMIT" 当前已落实                                   (CUR_COMMIT) = ON ...

  8. 洛谷P1434 滑雪【记忆化搜索】

    题目:https://www.luogu.org/problemnew/show/P1434 题意: 给一个矩阵,矩阵中的数字代表海拔高度. 现在要找一条最长路径,使得路径上的海拔是递减的. 思路: ...

  9. Google、微软、Linkedln、Uber、亚马逊等15+海外技术专家聚首2018TOP100Summit

    11月30日-12月3日,由msup主办的第七届全球软件案例研究峰会(以下简称为TOP100Summit)将在北京国家会议中心举办.本届峰会以“释放AI生产力,让组织向智能化演进”作为开幕式主题, 4 ...

  10. 转发一篇好文：36氪翻译自medium的文章： 读书没有 KPI：为什么坚持“一年读 100 本书”没用？

    你只是为了达成所谓的数量目标而读书. 编者按:读书本是一项安静.缓慢的活动,但随着现代社会节奏的加快,信息技术的广泛普及,读书这一行为模式也开始发生了变化.越来越多的人开始碎片化阅读,并且越来越多的文 ...