每一个标签都是一个盒子，具体见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. TCP三次握手四次挥手过程及各过程中客户端和服务器端的状态。

    #三次握手 客户端向服务器端发送SYN包,客户端进入SYN_SEND状态 服务器端收到客户端发送的包返回ACK+SYN包,服务器端进入SYN_RECV状态 客户端收到服务器端返回的包再发回ACK包,客 ...

  2. POJ 1743 不可重叠的最长重复子串

    原问题,其实是找最长的相似子串,所谓相似就是一个子串每个值加上一个偏移值可以得到另一个子串. 我们先求原数组的差值数组,对新数组求后缀数组,二分答案,判定是否有某个Height数组中的sa最小值与最大 ...

  3. JQuery插件之Animate.css和 jquery-aniview

    Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(fl ...

  4. ClickHouse 快速入门

    ClickHouse 是什么 ClickHouse 是一个开源的面向联机分析处理(OLAP, On-Line Analytical Processing) 的列式存储数据库管理系统. 在一个 &quo ...

  5. Logback Pattern

    Logback日志配置示例 <appender name="SYSLOG" class="ch.qos.logback.classic.net.SyslogAppe ...

  6. TypeScript入门-枚举、类型推论

    枚举 使用枚举可以定义一些具有名字的数字常量,和在C语言中一样都是使用关键字enum enum Direction { Up = 1, Down = 1<<2, Left, Right } ...

  7. 微信小程序(组件demo)以及预览方法：（小程序交流群：604788754）

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  8. 【2017-05-05】timer控件、三级联动、帐号激活权限设置

    一.Timer控件 Timer实际就是一个线程控件. 属性:Enabled    是否被启用 Interval     多长时间执行一次控件中的代码 事件: Tick     事件中放要执行的代码. ...

  9. angular控制器之间的传值

    每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个 ...

  10. Spring Boot 整合 Elasticsearch，实现 function score query 权重分查询

    摘要: 原创出处 www.bysocket.com 「泥瓦匠BYSocket 」欢迎转载,保留摘要,谢谢! 『 预见未来最好的方式就是亲手创造未来 – <史蒂夫·乔布斯传> 』 运行环境: ...