边框

边框有三个要素: 粗细、线性样式、颜色

border: solid

  • 如果颜色不写,默认是黑色。
  • 如果粗细不写,不显示边框。
  • 如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框。

按照3要素来写border

  1. border-width: 3px;
  2. border-style: solid;
  3. border-color: red;

线的样式有实线、点线、双线、虚线

  1. border-style: solid dotted double dashed;
  2. 表示
  3. 上边框是实线
  4. 右边框是点线
  5. 下边框是双线
  6. 左边框是虚线

按照方向划分

  1. border-top-width: 10px;
  2. border-top-color: red;
  3. border-top-style: solid;
  4.  
  5. border-right-width: 10px;
  6. border-right-color: red;
  7. border-right-style: solid;
  8.  
  9. border-bottom-width: 10px;
  10. border-bottom-color: red;
  11. border-bottom-style: solid;
  12.  
  13. border-left-width: 10px;
  14. border-left-color: red;
  15. border-left-style:solid;
  16.  
  17. 上面12条语句,相当于 bordr: 10px solid red;

另外还可以这样:

  1. border-top: 10px solid red;
  2. border-right: 10px solid red;
  3. border-bottom: 10px solid red;
  4. border-left: 10pxb solid red;
  1. border:none
  2. border:0
  3. 表示border没有设置样式。

使用border来制作小三角

  1. /*小三角 箭头指向下方*/
  2. div{
  3. width: 0;
  4. height: 0;
  5. border-bottom: 20px solid red;
  6. border-left: 20px solid transparent;
  7. border-right: 20px solid transparent;
  8. }

07-border(边框)的更多相关文章

  1. iPhone 6/plus iOS Safari fieldset border 边框消失

    问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...

  2. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  3. 【代码笔记】Web-CSS-CSS Border(边框)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  5. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  6. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  7. padding(内边距)、margin(外边距)、border(边框)

    元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...

  8. border边框的宽度/样式/颜色 全部值

    border 用emmet写border的时候, 缩写是:bd. 不是b, 也不是bdr: b会扩展成bottom, bdr 会扩展成 border-right, border的宽度: 1px 基本上 ...

  9. [CSS]border边框

    border: 1px solid #ccc;    /*1像素 实线 灰色*/可分割成:border-width:1px;border-style: solid; border-color: #00 ...

  10. border边框属性

    边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...

随机推荐

  1. uoj #49. 【UR #3】铀仓库

    http://uoj.ac/problem/49 这题二分答案可以做,同时存在另一个直接二分的解法. 考虑对每个点,二分能向左右延伸的最大半径,由于权值范围较大,不能O(1)查询向一侧走指定距离后到达 ...

  2. 用ADB打开MUMU模拟器的WLAN用于设置代理IP

    adb connect 127.0.0.1:7555 adb shell am start -a android.intent.action.MAIN -n com.android.settings/ ...

  3. BloomFilter理解

    知道BloomFilter是因为RocksDB数据库中用到了这个技术,用于判断1个数据是否存在于1个SST文件中. BloomFilter可能存在误判,就是判断数据是存在集合中,而实际上可能不存在,概 ...

  4. CountDownLatch的简单讲解

    正如每个Java文档所描述的那样,CountDownLatch是一个同步工具类,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行.在Java并发中,countdownlatch的概念是一 ...

  5. Win10开发环境配置

    基本环境变量配置:最近工作电脑固态硬盘损坏了,导致不得不重新装机,从前配置的环境需要重新配置,在此标记. Java环境配置: 添加变量 JAVA_HOME=D:\Program Files\Java\ ...

  6. CRM N:1 关系或者字段无法删除

    点开详细信息查看那些实体引用了该组件.查看内容如下: 1 查看窗体上有无该字段; 2 查看视图中有无该字段; 3 查看试图的 筛选条件; 4 查看试图的 查找列; 5 发布之后再试试.

  7. Hadoop 2.x常用端口及查看方法

    Hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着Hadoop周边组件的增多,完全记不住哪个端口对应哪个应用,特收集记录如 ...

  8. delphi正则表达式学习笔记(三)

    Delphi 中经常使用的正则表达式 在 Delphi 中使用正则表达式, 目前 PerlRegEx 应该是首选, 准备彻底而细致地研究它.  官方网站: http://www.regular-e x ...

  9. Android Studio将项目打包成apk

    Android Studio将项目打包成apk 第一种方法:适合自己调试用. (1)直接在项目中生成: (2)位置是在你的项目中 第二种方法:适合发布应用. (1)找到Generate Signed ...

  10. java对redis的基本操作(初识)

    一.server端安装 1.下载 https://github.com/MSOpenTech/redis 可看到当前可下载版本:redis2.6