<!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. HTML之<meta>使用和说明

    关于<meta>,我们都不陌生,随意打开一个网页查看源代码就可以看到<head>里出现它的身影. 简单来说,<meta>是描述 HTML 文档的元数据.例如网页描述 ...

  2. ReSharper 10.0.0.1 Ultimate 完美破解补丁使用方法

    转自:http://www.leavescn.com/Page/Content.aspx?id=94 ReSharper 10.0.0.1 Ultimate 完美破解补丁使用方法,本资源来自互联网,感 ...

  3. Request参数值自动去空格

    /// <summary> /// TypeTrimHelper /// </summary> public static class TypeTrimHelper { /// ...

  4. Monkey测试简介【转载】

    转载:https://www.xuebuyuan.com/3182523.html 一.Monkey测试简介 Monkey测试是Android平台自动化测试的一种手段,通过Monkey程序模拟用户触摸 ...

  5. 在Ubuntu登陆界面输入密码之后，黑屏一闪后，又跳转到登录界面

    现象:在Ubuntu登陆界面输入密码之后,黑屏一闪后,又跳转到登录界面.原因:主目录下的.Xauthority文件拥有者变成了root,从而以用户登陆的时候无法都取.Xauthority文件.说明:X ...

  6. 剑指offer编程题Java实现——面试题13在O(1)时间内删除链表节点

    题目:给定单向链表的头指针和一个节点指针,定义一个函数在O(1)时间删除该节点. 由于给定的是单向链表,正常删除链表的时间复杂度是查找链表的时间复杂度即O(n),如果要求在O(1)时间复杂度内删除节点 ...

  7. 跨站请求伪造和csrf_token使用

    day70 csrf简单用法      什么是CSRF ?         跨站请求伪造,                       问题:         1. 钓鱼网站的页面和正经网站的页面对浏 ...

  8. Android 和 iOS 实现录屏推流的方案整理

    一.录屏推流实现的步骤 1. 采集数据 主要是采集屏幕获得视频数据,采集麦克风获得音频数据,如果可以实现的话,我们还可以采集一些应用内置的音频数据. 2. 数据格式转换 主要是将获取到的视频和音频转换 ...

  9. IntelliJ IDEA 注册码（因为之前的地址被封杀了，所以换了个地址）

    附上IntelliJ IDEA 注册码(感谢提供注册码的大神):http://idea.qinxi1992.cn/(已封杀) http://idea.lanyus.com/(新地址) 注:以前直接复制 ...

  10. C语言中全局结构体指针隐含的错误

    前天在嵌入式系统上,调试一个数组的全局变量时,发现该变量一直会动态变化.深入分析, 才发现该全局结构体没有申请内存,而是用了一个指针.这种情况编译器是检查不出来的,在linux 上运行会挂掉,但是在裸 ...