border :(边框);

  其实现在的border是三个属性合成的,

      border-width:边框大小;

      border-style:边框的样式;

      border-color:边框的颜色;

  合成以后的用法更方便,如下:

       border:size pattenr color; size:边框大小,如1px;pattenr:线条模式,solid实心线条; color:边框颜色,如red红色;

  可以不按顺序写,就算其中有项不写,也不影响输出,都有自己的默认样式;

  border-style,用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。

例子如下:

border-style:dotted solid double dashed;

  上边框是点状,右边框是实线,下边框是双线,左边框是虚线;

  盒模型的四个属性:


  Content(内容含width,height)-padding(填充/内边距)—border(边框)—margin(边距/外边距)—Border边框(影响实际宽高)

  box-sizing: border-box;属性把边框设置成盒子的内边框
 

css边框普通属性的更多相关文章

  1. 利用CSS边框合并属性打造table细边框

    CSS代码: <style> table{ border-collapse: collapse;/* 边框合并属性 */ width:200px; } th{ border: 1px so ...

  2. CSS的背景属性和边框属性

    CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...

  3. 复习-css边框和背景属性

    css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...

  4. CSS .css边框属性(border)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. HTML&CSS基础-边框简写属性

    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...

  6. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  7. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  8. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

  9. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.声明边框 边框的声明有 ...

随机推荐

  1. Programiz C 语言教程·翻译完成

    原文:Programiz 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. 在线阅读 ApacheCN 学习资源 目录 C 简介 C 关键字和 ...

  2. H5 canvas 解决合成图模糊(canvas真机下scale不起作用,无法缩放显示的问题)

    在解决canvas合成图片模糊的问题想必我们已经了解了 window.devicePixelRatio      window接口的devicePixelRatio返回当前显示设备的物理像素分辨率与C ...

  3. MySQL--事件/定时器

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11777311.html MySQL--事件/定时器 : 多个SQL的集合, 定时执行任务. 查 ...

  4. Ext原码学习之lang-Array.js

    // JavaScript Document //Array 方法 (function(){ var arrayPrototype = Array.prototype, slice = arrayPr ...

  5. LCA与树上DP

    LCA 倍增 f[i][j]代表i的2^j级父亲 f[i][j]=f[f[i][j-1]][j-1] 有了f数组,如何计算"u向上跳k步到达哪个点"? 对k作二进制分解,枚举所有二 ...

  6. postman项目接口文档和登录步骤原理

    培训内容 实训项目:非常果岭-发现模块接口测试,单接口.流程脚本编写: 使用工具:postman 培训方式 1)postman使用说明 2)项目接口文档和登录步骤原理   一.首先了解postman使 ...

  7. iOS模拟弱网

    iOS平台: 首先需要苹果手机开启开发者选项,方法是手机连接到MacOS上启动Xcode. 通过自带的开发者选项 >Network Link Conditioner, 即可简单的模拟各种速度的网 ...

  8. python基础语法_字符串编码

    Python常用字符编码 http://www.cnblogs.com/schut/p/8406897.html   Python常见字符编码间的转换   在字符串写入文件时,有时会因编码问题导致无法 ...

  9. 《PHP程序员面试笔试宝典》——如何回答算法设计问题?

    如何巧妙地回答面试官的问题? 本文摘自<PHP程序员面试笔试宝典> 程序员面试中的很多算法设计问题,都是历年来各家企业的"炒现饭",不管求职者以前对算法知识掌握得是否扎 ...

  10. Linux基础:VLAN篇

    一.二层基础知识 1.1 vlan介绍 本小节重点: vlan的含义 vlan的类型 交换机端口类型 vlan的不足 1.1.1 vlan的含义 局域网LAN的发展是VLAN产生的基础,因而先介绍一下 ...