边框

border:边框的意思,描述盒子的边框

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

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

边框样式

边框样式属性指定要显示什么样的边界。

border-style属性用来定义边框的样式

border-style 值:

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

按照3要素来写border

border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/

 

按照方向划分

border-top-width: 10px;
border-top-color: red;
border-top-style: solid; border-right-width: 10px;
border-right-color: red;
border-right-style: solid; border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid; border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

上面12条语句,相当于 border: 10px solid red;

另外还可以这样:

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

border:none;

border:0;

表示border没有设置样式。

使用border来制作小三角

/*小三角 箭头指向下方*/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

设置背景色圆四角

border-radius:5px

11-----broder(边框)的更多相关文章

  1. (0)前端总结(HTML + CSS + JQ)

    HTML 1.<meta charset="UTF-8">  #设置页面编码,这个设置英文则现在国内浏览器会弹出是否要转换中文 2.<title>我的第一个 ...

  2. VB操作EXCEL文件

    用VB操作Excel(VB6.0)(整理) 首先创建Excel对象,使用ComObj:Dim ExcelID as Excel.ApplicationSet ExcelID as new Excel. ...

  3. poi导出excel

    Java使用poi组件导出excel报表,能导出excel报表的还可以使用jxl组件,但jxl想对于poi功能有限,jxl应该不能载excel插入浮动层图片,poi能很好的实现输出excel各种功能, ...

  4. 前端知识杂烩(HTML[5]?+CSS篇)

    1. CSS 优先级算法如何计算?2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?3.用纯CSS创建一个三角形的原理是什么?4. 如何解决inline-block元素的空白间距( ...

  5. Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF

    1.常见用法           using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...

  6. css_01之基础属性、选择器

    1.  常用属性:①color:文本颜色:②background-color:背景颜色:③font-size:文字大小: 2.  样式声明:①内部样式:style=“样式规则:”,写于作用标签内,优先 ...

  7. Microsoft.Office.Interop.Excel的用法

    1)ApplicationClass ExcelApp = New ApplicationClass(); 2) 更改 Excel 标题栏: ExcelApp.Caption := '应用程序调用 M ...

  8. Delphi Excel 操作大全

    Delphi Excel 操作大全 (一) 使用动态创建的方法首先创建 Excel 对象,使用ComObj:var ExcelApp: Variant;ExcelApp := CreateOleObj ...

  9. Delphi操作Excel大全

    Delphi操作Excel大全 DELPHI操作excel(转)(一) 使用动态创建的方法 首先创建 Excel 对象,使用ComObj:var ExcelApp: Variant;ExcelApp ...

  10. VBS操作Excel常见方法

    VBS操作Excel常见方法 作者: 字体:[增加 减小] 类型:转载 时间:2009-11-13我要评论 VBS控制Excel常见方法,需要的朋友可以参考下. dim oExcel,oWb,oShe ...

随机推荐

  1. github 在线 创建文件夹

    参考: http://webapps.stackexchange.com/questions/36411/create-a-folder-in-github-via-the-web-interface

  2. bzoj 3994 约数个数和 —— 反演+数论分块

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3994 推导过程和这里一样:https://www.cnblogs.com/MashiroSk ...

  3. bootstrap插件使用

    首先,针对导航栏(单页面导航插件(缓慢跳转)) 引入插件:jquery.singlePageNav.min.js   下载链接:http://pan.baidu.com/s/1jHBaQxg  密码: ...

  4. DataTable列查询加排序

    DataTable列查询加排序 DataRow[] drArray = dt.Select("ANLYCOM_ID='" + chSPrdtStblAnly.AnlyComId + ...

  5. linux命令-vim一般模式下光标移动

    vim 有一般模式,编辑模式,命令模式 ///////一般模式可以光标移动,复制,剪切,粘贴     编辑模式可以输入想输入的字符       命令模式刚才用到了set nu //////////// ...

  6. shell自动收集服务器硬件系统信息

    shell自动收集服务器硬件系统信息,插入数据库并通过web页面显示. 一,shell自动收集服务器硬件系统信息,插入数据库.#centos 7操作系统下 #!/bin/bash #auto get ...

  7. IPC编程之消息队列

    本地的进程间通信(IPC)有很多种方式,但可以总结为下面3类: 1.消息传递(管道.FIFO.消息队列) 2.同步(互斥量.条件变量.读写锁.文件和写记录锁.信号量) 3.共享内存(匿名的和具名的) ...

  8. Unity添加自定义快捷键——UGUI快捷键

    在Editor下监听按键有以下几种方式: 自定义菜单栏功能: using UnityEngine; using UnityEditor; public static class MyMenuComma ...

  9. mvn jetty:run 出现PermGen space outofmemeryerror

    使用mvn jetty:run跑别人的项目时出现了PermGen space outofmemeryerror异常 http://stackoverflow.com/questions/1451648 ...

  10. Luogu 3825 [NOI2017]游戏

    Luogu的spj现在挂了,要去其他OJ提交. 2-SAT 发现如果不考虑$x$的情况,这就成为一个2-SAT的裸题了,我们有$O(n + m)$的方法可以解决它. 那加上$x$的情况怎么弄……岂不是 ...