<!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. vue.js项目nginx部署

    开发环境搭建完成.二.编译部署1.项目路径下demo输入命令npm run build编译完成后会发现在demo文件夹下多出一个dist文件夹这里面就是编译好的文件了.2.网上下载nginx,下载地址 ...

  2. （转载）linux 常用命令

    出处:http://www.cnblogs.com/vamei $ 命令行提示符 粗体表示命令 斜体表示参数 filename, file1, file2 都是文件名.有时文件名有后缀,比如file. ...

  3. Eclipse运行时发生An internal error occurred during：“**************” 的解决办法

    2015-05-20 原因分析: 当前工作目录下的 .project 文件 不一致 例如1: 南京大学 Mooctest 提交考试试卷时出现的:An internal error occurred d ...

  4. .NET Core微服务之路：利用DotNetty实现一个简单的通信过程

    上一篇我们已经全面的介绍过<基于gRPC服务发现与服务治理的方案>,我们先复习一下RPC的调用过程(笔者会在这一节的几篇文章中反复的强调这个过程调用方案),看下图

  5. Kaldi单音素模型 训练部分

    在Kaldi中,单音素GMM的训练用的是Viterbi training,而不是Baum-Welch training.因此就不是用HMM Baum-Welch那几个公式去更新参数,也就不用计算前向概 ...

  6. Ubuntu 16.04虚拟机调整窗口大小自适应Windows 7

    Windows 7上Ubuntu 16.04虚拟机安装成功后,默认的虚拟机窗口比较小,需要适当调整,才能把虚拟机的屏幕放大, 适合使用,以下介绍调整方法. 安装VMware Tools  启动虚拟机, ...

  7. Codeforces gym102152 K.Subarrays OR

    传送:http://codeforces.com/gym/102152/problem/K 题意:给定$n(n\le10^5)$个数$a_i(a_i\le10^9)$,对于任一个子数组中的数进行或操作 ...

  8. POJ 1177Picture 扫描线(若干矩形叠加后周长)

    Picture   Description A number of rectangular posters, photographs and other pictures of the same sh ...

  9. mysql explain语法详解--优化你的查询

    原文地址:http://blog.csdn.net/zhuxineli/article/details/14455029 explain显示了mysql如何使用索引来处理select语句以及连接表.可 ...

  10. python学习记录（一）

    1.打印操作 >>> print('hello') hello >>> print(1+2) 3 2.字符串操作 ① ') Traceback (most rece ...