四个边框

border-left 设置左边框,一般单独设置左边框样式使用
border-right 设置右边框,一般单独设置右边框样式使用
border-top 设置上边框,一般单独设置上边框样式使用
border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

四边相同边框border简写
#divcss5{border:1px solid #00F}
设置了divcss5对象盒子1px像素蓝色实线边框

边框三个样式
通常我们可以对边框设置宽度(厚度)、边框样式、边框颜色这三个属性与参数。

边框样式值如下:

none :  无边框。与任何指定的border-width值无关
hidden :  隐藏边框。IE不支持
dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
solid :  实线边框(常用)
double :  双线边框。两条单线与其间隔的和等于指定的border-width值
groove :  根据border-color的值画3D凹槽
ridge :  根据border-color的值画菱形边框
inset :  根据border-color的值画3D凹边
outset :  根据border-color的值画3D凸边

边框样式截图:

5

我们通常使用主流浏览器兼容边框样式有:

1、实线边框:solid
Border:1px solid #000 设置对象1px(像素)宽厚的黑色实线边框。

2、虚线边框:dashed
Border:1px dashed #000 设置对象1px(像素)宽厚的黑色虚线边框。

Css border样式的更多相关文章

  1. 精简的网站reset 和 css通用样式库

    参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

  2. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  5. CSS Reset样式重置

    为了让页面在各不同浏览器之间显示效果一致,CSS样式清除和重置是前端开发必需要做的事情,结合前车之鉴,整理了份CSS重置样式代码供参考. @charset "utf-8"; /* ...

  6. CSS详细样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  8. 第1天:CSS基本样式

    今天学习了CSS基本样式和属性.在做练习的时候遇到一个小问题,最后解决了. 记住:浏览器有默认margin和padding.样式最开始记得一定写:*{margin:0;padding:0}. 学习经验 ...

  9. 用JS控制CSS基本样式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...

随机推荐

  1. 仿写从iOS8开始支持的UIAlertController:BGAAlertController-Android

    工作以来公司UI设计师出的Android效果图都是iOS风格的UIAlertView和UIActionSheet,新项目还是用原来那一套,不想重复造轮子,所以仿写了从iOS8开始支持的UIAlertC ...

  2. zzulioj--1786--求最大值(技巧题)

    1786: 求最大值 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 222  Solved: 46 SubmitStatusWeb Board Des ...

  3. requireJS实现原理分析

    下面requireJS实现的基本思路  项目地址https://github.com/WangMaoling/require var require = (function(){ //框架版本基本信息 ...

  4. TabPage判断重复添加Page

    ..... ........ ...........代码如下: bool isPag = true; foreach (TabPage page in tbpDynamicMenu.TabPages) ...

  5. 读书笔记-构建高性能Web站点

    基本概念 带宽:通常说的带宽比如8M带宽,是指主机与互联网运营商的交换机之间的数据传输速度,因为数据链路层的流量是通过控制接收方实现的.而百兆网卡则是指网卡的发送速度为100Mbit/s,则是指网卡发 ...

  6. Glide错误java.lang.IllegalArgumentException: You cannot start a load for a destroyed activity

    解决办法 在使用Glide的那段代码加是否在主线程判断 if(Util.isOnMainThread()) { Glide.with(ClassifyItemDetailActivity.this). ...

  7. 如何把非服务程序(一般的应用程序)注册为Windows服务

    非服务程序:不是标准的服务形式的程序吧,只是普通的应用程序. 1.要实现这个功能要用到微软提供的两个小工具“instsrv.exe”和“srvany.exe”,工具可以从微软下载安装工具包得到:htt ...

  8. mysql插入数据出现java.lang.NullPointerException

    在写购物车持久层的时候,要进行测试的时候居然出现了空指针异常: 最后发现是测试类少了 @RunWith(SpringRunner.class)@SpringBootTest 如下是没改之前的测试类: ...

  9. BZOJ 2555: SubString 后缀自动机_LCT

    很水的一道题,就是有些细节没注意到. 比如说将调试信息误以为是最终结果而多调了20分钟QAQ ..... 我们注意到,每新加一个节点,改变的是该节点沿着 Parent 走一直走到根节点. 对应的,在 ...

  10. 简洁的MVC思想框架——Nancy(环境配置与Get操作)

    Nancy官网——https://github.com/NancyFx/Nancy 概述:Nancy是一个开源的Web轻型框架内核符合MVC思想,有开发方便,路由简单的特点,而且功能齐全 起步:Hel ...