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. java中的数据模型类

    package com.aaa.zxf.ajax.test; import java.io.Serializable; /** * java中的继承. * * 一.数据模型类 * 数据模型类:用来存取 ...

  2. 蓝桥杯试题 基础练习 2n皇后问题以及n皇后问题

    在学习2n皇后之前,我们应该认识一下n皇后问题: 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.你的任务是,对于 ...

  3. AT2348 [ARC070D] HonestOrUnkind

    不妨先从无解的情况下手,不难发现当 \(A \le B\) 时是一定无解的. 因为不诚实的 \(B\) 个人可以装作是诚实的,全部说自己这一方是诚实的对方是不诚实的我们就无法判断了. 下面我们就可以在 ...

  4. EKS助力小白实践云原生——通过k8s部署wordpress应用

    目前云原生在大厂已经有了充分的实践,也逐渐向小厂以及非互联网公司推广.适逢12月20日,腾讯云原生[燎原社]精心打造了云原生在线技术工坊,让零基础的同学也能快速入门和实践 Docker 和 Kuber ...

  5. Mysql Json函数创建 (二)

    本节中列出的功能由组件元素组成JSON值. JSON_ARRAY([val[, val] ...]) 计算(可能为空)值列表,并返回包含这些值的JSON数组. mysql> SELECT JSO ...

  6. Yarn命令列表

    常用命令: 创建项目:yarn init 安装依赖包:yarn == yarn install 添加依赖包:yarn add Yarn命令列表 命令 操作 参数 标签 yarn add 添加依赖包 包 ...

  7. FidBugs的使用学习

    是什么? 静态代码分析器,它检查类或者JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题.Findbugs自带检测器,其中有60余种Bad practice,80余种Correctness, ...

  8. mybatis中的#和$的使用规范

    MyBatis 中 #{} 和 ${} 的区别 1.在MyBatis 的映射配置文件中,动态传递参数有两种方式: (1)#{} 占位符 (2)${} 拼接符 2.#{} 和 ${} 的区别 (1) 1 ...

  9. 简述redis集群的实现原理

    在哨兵sentinel机制中,可以解决redis高可用问题,即当master故障后可以自动将slave提升为master,从而可以保证redis服务的正常使用,但是无法解决redis单机写入的瓶颈问题 ...

  10. netty系列之:可以自动通知执行结果的Future,有见过吗?

    目录 简介 JDK异步缘起 netty中的Executor Future的困境和netty的实现 总结 简介 在我的心中,JDK有两个经典版本,第一个就是现在大部分公司都在使用的JDK8,这个版本引入 ...