边框

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. centos 6.7 (UDEV,、etc/hosts)安装 RAC 11.2.0.4 报错处理

    环境说明: ​db 11.2.0.4        os: centos 6.7    UDEV管理ASM      没有配置DNS服务器,采用/etc/hosts​报错: ​1.    CVU(Cl ...

  2. ssh免密码登录配置方法,(图示加命令)

    首先,说明一下我们要做的是,serverA 服务器的 usera 用户免密码登录 serverB 服务器的 userb用户. 我们先使用usera 登录 serverA 服务器 [root@serve ...

  3. Netty组件

    一.Channel.EventLoop 和ChannelFuture 这些类合在一起,可以被认为是Netty 网络抽象的代表: Channel—Socket: EventLoop—控制流.多线程处理. ...

  4. PID控制及整定算法

    一.PID控制算法 PID是比例.积分.微分的简称,PID控制的难点不是编程,而是控制器的参数整定.参数整定的关键是正确地理解各参数的物理意义,PID 控制的原理可以用人对炉温的手动控制来理解.阅读本 ...

  5. Ajax前端调后台方法

    后台对当前页面类进行注册 Ajax.Utility.RegisterTypeForAjax(typeof(Login));//Login 当前类名 在方法上面加 [Ajax.AjaxMethod(Aj ...

  6. 问题:oracle nvl;结果:Oracle中的NVL函数

    Oracle中的NVL函数 (2012-11-30 13:21:43) 转载▼ 标签: nvl oracle 分类: Oracle Oracle中函数以前介绍的字符串处理,日期函数,数学函数,以及转换 ...

  7. linux命令-rpm查询包

    安装了哪些rpm包呢 [root@wangshaojun Packages]# rpm -qa /////查看全部安装的包 [root@wangshaojun Packages]# rpm -qa l ...

  8. DevExpress 显示进度条

    1.使用了DevExpress的WaitDialogForm WaitDialogForm waitDialogForm = null; new Thread((ThreadStart)delegat ...

  9. js中Function方法

    function.apply(thisArg,argArray) apply方法调用function,传递一个会绑定到this上的对象和一个可选的数组作为参数. apply方法被用在apply调用模式 ...

  10. IIS7.0(虚拟机)发布MVC5程序出现Http403错误的解决方法.

    近来,用MVC5开发自己的一个小网站.网上租用了一个小空间(虚拟主机),可选.net版本为2.0 3.0 3.5 4.0 ,上传网站 后发现是403错误.不能访问. 经与技术人员联系,把虚拟机更换到高 ...