每一个标签都是一个盒子，具体见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. 详谈 Unity3D AssetBundle 资源加载,结合实际项目开发实例

    第一次搞资源更新方面,这里只说更新,加载,AssetBundle资源加载,谈谈自己的理解,以及自己在项目中遇到的那些神坑,现在回想一下,真的是自己跪着过来的,说多了,都是泪. 我这边是安卓AssetB ...

  2. oracle调用array参数存储过程

    declare -- Non-scalar parameters require additional processing files tyt_gas2014_search; ,); temp1 t ...

  3. yum仓库

    1.概念: Yum仓库则是为进一步简化RPM管理软件难度而设计的,Yum能够根据用户的要求分析出所需软件包及其相关依赖关系,自动从服务器下载软件包并安装到系统 yum的工作原理:执行yum命令――&g ...

  4. CSS空白符处理!

    在CSS中有一个非常重要但对于初学者又非常容易忽略的属性: white-space:nowrap; //文本不换行属性 这里附带说一下W3Cschool中对white-space的解释: white- ...

  5. Xamarin.Android 绑定友盟社会化分享组件

    Xamarin.Android 绑定友盟社会化分享组件 最近在开发博客园Android App的时候需要用到友盟社会化分享组件,在github上搜了一下都没有找到最新版本绑定好的项目,就自己动手来绑定 ...

  6. Xamarin自定义布局系列——支持无限滚动的自动轮播视图CarouselView

    背景简述 自动轮播视图(CarouselView)在现在App中的地位不言而喻,绝大多数的App中都有类似的视图,无论是WebApp还是Native App.在安卓.iOS以及Windows(UWP) ...

  7. poj1182食物链，经典带权并查集

    动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种. 有人用两种 ...

  8. linux优化之SElinux关闭

    查看selinux状态: # getenforce   注:Enforcing表示开启,Permissive表示禁用 临时关闭或开启selinux: # setenforce  [1|0]  注:1是 ...

  9. 初次使用git配置以及git如何使用ssh密钥（将ssh密钥添加到github）

    初次安装git配置用户名和邮箱 初次安装git需要配置用户名和邮箱,否则git会提示:please tell me who you are. 你需要运行命令来配置你的用户名和邮箱: $ git con ...

  10. .Net程序员学用Oracle系列(25)：触发器详解

    1.触发器理论 1.1.触发器的应用场景 1.2.触发器的类型 1.3.DML 触发器的触发顺序 2.触发器实战 2.1.创建触发器 2.1.1.创建 DML 触发器 2.1.2.创建 DDL 触发器 ...