每一个标签都是一个盒子，具体见HTML教程

因此，每一个标签有大小，有边框

1.border样式：单一样式

2.border样式：复合样式

border: 粗细 类型 颜色；

3.border方向

4.代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div{

                width: 300px;

                height: 300px;

                /*单一样式*/

                border-color: red;

                border-width: 4px;

                border-style: solid;

                /*复合样式*/

                border: 4px solid red;

            }

        </style>

    </head>

    <body>

        <div></div>

    </body>

</html>

边框方向：以top为例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div{

                width: 300px;

                height: 300px;

                /*单一样式*/

                border-top-color: red;

                border-top-width: 4px;

                border-top-style: solid;

                /*复合样式*/

                border-top: 4px solid red;

            }

        </style>

    </head>

    <body>

        <div></div>

    </body>

</html>

一天搞定CSS：边框border--02的更多相关文章

  1. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

  2. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  3. 一天搞定CSS：盒模型content、padding、border、margin--06

    1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物 ...

  4. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  5. 十分钟搞定CSS选择器

    在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级 不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. ...

  6. (转)十分钟搞定CSS选择器

    原文地址:http://www.cnblogs.com/dolphinX/p/3347713.html 在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下 ...

  7. 一天搞定CSS（扩展）：CSS Hack

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  8. 一天搞定CSS：表单（form）--20

    1.表单标签 2.input标签属性与取值 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  9. 一天搞定CSS： 标签样式初始化（CSS reset）及淘宝样式初始化代码--09

    样式初始化:是指对HTML中某些标签的默认样式进行清除 样式初始化目的: 不同浏览器的默认样式不一样,若不清理,会导致相同的代码在浏览器中解析结果不一样,为了避免这种情况,所以需要进行样式初始化. 代 ...

随机推荐

  1. Elasticsearch搜索之most_fields分析

    顾名思义,most_field就是匹配词干的字段数越多,分数越高,也可设置权重boost. 下面是简易公式(详细评分算法请参考:http://m.blog.csdn.net/article/detai ...

  2. Elasticsearch1.7服务搭建与入门操作

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apach ...

  3. 软件工程工具学习(1)---Visio

    要给15级软件工程上机了.开个系列记录软件工程开发过程中所会用到的一些工具的学习. 第一篇---软件分析与设计工具 Microsoft Visio Visio 介绍 1.Visio是一款矢量图形与图标 ...

  4. ABAP 7.4 新语法-内嵌生命和内表操作

    1.内嵌声明 2.内表操作 3.opensql ************************************************************************ 1. ...

  5. Linux防火墙配置—SNAT2

    1.实验目标 以实验"Linux防火墙配置-SNAT1"为基础,为网关增加外网IP地址,为eth1创建虚拟接口,使外网测试主机在Wireshark中捕获到的地址为eth1虚拟接口的 ...

  6. jquery中is()函数

    is(expr)函数判断当前Jquery对象所匹配的元素是否存在.只要其中一种符合,就返回 true,否则返回 false. 如果 expr是个字符串,既视为Jquery的选择器,用于表示选择的元素. ...

  7. 使用虚拟机CentOS7部署CEPH集群

    第1章   CEPH部署 1.1  简单介绍 Ceph的部署模式下主要包含以下几个类型的节点 Ø CephOSDs: A Ceph OSD 进程主要用来存储数据,处理数据的replication,恢复 ...

  8. UVA 10905 Children's Game (贪心)

    Children's Game Problem Description There are lots of number games for children. These games are pre ...

  9. sublime text 3文件标题无法显示中文的解决办法

    前言 你是否遇也到了sublime文件标题无法显示中文的问题呢?如下列图片所示: 解决办法 1.点击菜单栏Preferences - > Settings. 打开下图: 2.在右边User内加入 ...

  10. 开源分布式任务调度平台Cuckoo-Schedule

    1         概述 1.1      平台概述 Cuckoo-Schedule是基于Quartz-Schedule的轻量级任务调度框架,具有易学习.易上手.开发高效稳定的特点.Demo地址:ht ...