<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>边框</title>

         <style type="text/css">

             div{

                 width: 300px;

                 height: 300px;

                 /*border: 1px solid red; 复合样式*/

                 /*单一样式*/

                 border-width: 1px 2px 3px 4px;

                 border-style: solid dashed dotted solid;

                 border-color: red blue black pink;

                 /*四个值依次分别对上、右、下、左赋值*/

                 /*当只有两个值时一次分别对上/下、左/右赋值*/

                 /*当放三个值时依次分别对上、左/右、下赋值*/

                 border-top: 10px solid yellow;

                 /*单独对上边框进行赋值，

                  border-bottom为下边框

                  border-left为左边框

                  border-right为右边框

                  * */

                 border-bottom-color: hotpink;

                 /*单独对下边框颜色进行复制*/

             }

         </style>

     </head>

     <body>

         <div>

         </div>

     </body>

 </html>

注意：边框其实不是一个矩形，当你把上边变得颜色设置的不同时你会发现变得是一个梯形，而如果你把div的宽和高设置为0的话，这个有变得不是梯形，他的上低也会变为0，成为一个三角形，这个在面试前端工作时，面试官有可能会问到

html页面边框的另一种写法的更多相关文章

  1. JavaScript Html页面加载完成三种写法

    //一.Html页面加载完成的JS写法 //1. $(function () {     alert("窗体Html页面加载完成方法一"); }); //2. $(document ...

  2. jquery 在页面中三种写法

    jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6.7.8浏览器,这样做的目的是为了兼容移动端开发.由于减少了一些代码,使得该版本比 jQuery 1.x ...

  3. 基于JS实现回到页面顶部的五种写法(从实现到增强)

    这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下   写法 [1]锚点 使用锚点链接是一种 ...

  4. 链接属性rel=’external’、rel=’nofollow’、rel=’external nofollow’三种写法的区别

    链接属性rel='external'.rel='nofollow'.rel='external nofollow'三种写法的区别   大家应该都知道rel='nofllow'的作用,它是告诉搜索引擎, ...

  5. ASP.NET 页面之间传值的几种方式

    开篇概述 对于任何一个初学者来说,页面之间传值可谓是必经之路,却又是他们的难点.其实,对大部分高手来说,未必不是难点. 回想2016年面试的将近300人中,有实习生,有应届毕业生,有1-3年经验的,有 ...

  6. flutter 容器 几种写法

    1.Stack: 取代线性布局 (译者语:和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下 ...

  7. 【ASP.NET MVC系列】浅谈ASP.NET 页面之间传值的几种方式

    ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

  8. 关于JQ中ready()方法的几种写法总结

    ——习惯贵在坚持,天才在于积累. 好久没写博客的我,似乎是忘记了当初写博客的初衷是要在博客笔记中提升自己的写作能力和积累自己的知识要点. 废话不多说. ready()方法作用: 在页面加载完成后,立即 ...

  9. angularJs中缓存数据，免去重复发起请求的几种写法

    带缓存处理的两种写法 过程:点击button触发load()方法,请求数据成后显示到页面中.如果已经请求过则从缓存中读取. 在线浏览 写法1: function demo(){ if (demo.ca ...

随机推荐

  1. 1.1初识python

    1.目前大量的公司都在使用python,功能强大很是牛逼! 2.运维要懂开发,做个全栈的工程师贼牛逼 3.python是一个解释型语言,编译型和解释型的区别是: ①编译型语言由编译器(Compiler ...

  2. 读书笔记之Linux系统编程与深入理解Linux内核

    前言 本人再看深入理解Linux内核的时候发现比较难懂,看了Linux系统编程一说后,觉得Linux系统编程还是简单易懂些,并且两本书都是讲Linux比较底层的东西,只不过侧重点不同,本文就以Linu ...

  3. 【jenkins 忘记密码】忘记Jenkins管理员密码的解决办法

    一.admin密码未更改情况 1.进入\Jenkins\secrets目录,打开initialAdminPassword文件,复制密码: 2.访问Jenkins页面,输入管理员admin,及刚才的密码 ...

  4. MySQL insert语句锁分析

    最近对insert的锁操作比较费解,所以自己动手,一看究竟.主要是通过一下三个sql来看一下执行中的sql的到底使用了什么锁. select * from information_schema.INN ...

  5. IMAGE WATCH工具安装与学习

    1.下载安装 从下载地址搜索IMAGE WATCH,即可下载自己所需要的IMAGE WATCH工具. 安装ImageWatch,双击ImageWatch.vsix进行安装即可: 2.使用示例 这里首先 ...

  6. 如何将他人的SOPC工程转换为自己可以使用的工程

    上篇文章的程序源码在:http://download.csdn.net/detail/noticeable/9921952 源码错误现象: 在下载源码文件解压后,打开系统工程,可以看到quartus ...

  7. 附加题2 ：git 简单练习

    目的: 练习git 基本操作 理解版本管理 Task 1:在码云上新建一个项目,项目命名 『Helloworld』 ,设置为公开访问. step 0: 在你计算机安装git.参照互联网教程<gi ...

  8. docker知识点杂记

    最近重新梳理了一下docker的一些基本知识,简单做了下总结.以后会逐步补充. 1.查看系统内核版本,需要3.10以上 $ uname -r 2.下载docker 说明:centos安装docker比 ...

  9. 记一次安装VS2015后启动失败的修复过程

    安装过程没有提示任何问题,然而启动vs时提示没有安装 .Net Framework 4.6,那就安装吧,但是安装 4.6 时却提示 Windows Moudle Installer 服务没有启动,于是 ...

  10. 《深入理解JAVA虚拟机》——学习笔记

    JVM内存模型以及分区 JVM内存分为: 1.方法区:线程共享的区域,存储已经被虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据 2.堆:线程共享的区域,存储对象实例,以及给数组分配的 ...