<!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. shell脚本基础教程

    一.什么是shell: shell解释:引用别人的话说:“Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言.” 简而言之, ...

  2. 8. Filters in ASP.NET MVC 5.0【ASP.NET MVC 5.0中的过滤器】

    ASP.NET Filers用来在MVC框架的不同请求处理阶段,注入额外的逻辑.过滤器为横切关注点提供了一种方法(日志记录,授权,缓存). 在这篇文章中,我将会向你介绍MVC框架支持的各种不同种类过滤 ...

  3. DWARF 中的 Debug Info 格式

    本周花了几天的时间来研究怎么在 breakpad [1, 2] 中加入打印函数参数的功能,以期其产生的 callstack 更具可读性,方便定位崩溃原因. 现代 ELF 中的调试信息基本是以 DWAR ...

  4. es2017新特性

    2017年6月底es2017不期而至; 截止目前es8是ecmascript规范的第九个版本:自es2015开始ECMA协会将每年发布一个版本并将年号作为版本号:算了 直接看下es2017的新特性: ...

  5. Servlet案例4：用户注册

    数据库准备: CREATE DATABASE web; USE web; CREATE TABLE `user` ( `uid` ) NOT NULL, `username` ) DEFAULT NU ...

  6. Linux快速目录间切换cd pushd popd

    1.   cd -     当前目录和之前所在的目录之间的切换 2.   cd + Alt . 用上次命令的最后一个目录路径 要用上上次命令的最后一个目录,就Alt+.两次就可以了 3.   push ...

  7. python实现线性排序算法-计数排序

    计数排序假定输入元素的每一个都是介于0到k之间的整数,此处K为某个整数,当k=O(n)时,计数排序的运行时间为O(n) 它的基本思想是:根据每个输入元素x确定小于x的元素个数,根据这个信息把x直接放到 ...

  8. vue 去哪网项目 学习笔记(一)

    启动项 mian.js 是整个项目的入口程序 定义局部组建 components 是定义的局部组建 template 渲染app里的内容 单文件组建 单文件组建是以vue 结尾的内容 app组建的内容 ...

  9. Spring Boot功能实战

    添加web功能启动器 添加了Spring Boot基础依赖后,如要使用web mvc功能,只需要添加如下启动器即可,Spring Boot会自动装配web功能. <dependencies> ...

  10. JavaScript中原型链的那些事

    引言 在面向对象的语言中继承是非常重要的概念,许多面向对象语言都支持两种继承方式:接口继承和实现继承.接口继承制只继承方法签名,而实现继承继承实际的方法.在ECMAScript中函数没有签名,所以EC ...