边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-style/*边框样式*/,3.border-color/*边框色彩*/三大属性构成构成;

border边框方位分为border-top/*边框上方*/border-bottom/*边框底部*/border-left/*边框左边*/border-right/*边框右边*/;

边框属性样式整理：border-style:none;/*无边框*/border-style:hidden;/*隐藏边框*/border-style:dotted;/*点状虚线*/border-style:dashed;/*块状虚线*/border-style:solid;/*实线*/border-style:double;/*双线*/（至于border-style:groove;border-style:ridge;border-style:inset;border-style:outset;效果用到较少，通常solid,dashed,none）;

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <title>11种常用css样式之border学习</title>
  7.      <style type="text/css">
  8.      /*边框简写*/
  9.      .box,.box2{
  10.          padding: 10px;
  11.          border-width: 5px;
  12.      }
  13.      .box{
  14.          /* border: 5px inset red; */
  15.          border-style: inset;
  16.          border-color: red;
  17.      }
  18.      /*边框样式*/
  19.      .box1{
  20.          border-style: none;/*无边框*/
  21.          border-style:hidden;/*隐藏边框*/
  22.          border-style: dotted;/*点状虚线*/
  23.          border-style: dashed;/*块状虚线*/
  24.          border-style: solid;/*实线*/
  25.          border-style: double;/*双线*/
  26.          border-style:groove;
  27.          border-style:ridge;
  28.          border-style:inset;
  29.          border-style:outset;
  30.          border-width: 5px;
  31.          border-color: #f90;
  32.      }
  33.      /*边框方位*/
  34.      .box2{
  35.          margin: 10px;
  36.          border-left: 10px groove cadetblue;
  37.          border-right: 10px ridge magenta;
  38.          border-top: 10px inset yellow;
  39.          border-bottom: 10px outset khaki;
  40.      }
  41.      </style>
  42.  </head>
  43.  <body>
  44.      <div class="box">
  45.          <div class="box1">
  46.              兄弟,好久不见了,挺念叨你的,不知道现在在哪发财,去跟你混了Brother
  47.          </div>
  48.          <div class="box2">
  49.              it's been a long time since I missed you. I don't know where I'm getting rich now.
  50.          </div>
  51.      </div>
  52.  </body>
  53.  </html>

11种常用css样式之border学习的更多相关文章

  1. 11种常用css样式之background学习

    background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...

  2. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  3. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  4. 11种常用css样式之鼠标、列表和尺寸样式学习

    鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...

  5. 11种常用css样式之开篇文本字体学习

    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...

  6. Day 31：CSS选择器、常用CSS样式、盒子模型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 获取jQuery对象的第N个DOM元素 && table常用css样式

    获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...

  8. 常用css样式(布局)

    兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...

  9. 几种常用CSS3样式

    在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用CSS3样式.关于其标准,W3C 仍然在对 CSS3 规范进行开发.不过,现代浏览器已经实现了相当多的 CSS3 属性.最近学习了CSS3,发现功 ...

随机推荐

  1. [bzoj4872] [洛谷P3750] [六省联考2017] 分手是祝愿

    Description Zeit und Raum trennen dich und mich. 时空将你我分开. \(B\) 君在玩一个游戏,这个游戏由 \(n\) 个灯和 \(n\) 个开关组成, ...

  2. 60 个让程序员崩溃的瞬间,太TM真实了

    前方高能!笑死人不偿命系列~ 表演即将开始,吃东西的请停下来,不然你会后悔的 1. 公司实习生找 Bug 2. 在调试时,将断点设置在错误的位置 3. 当我有一个很棒的调试想法时 4. 偶然间看到自己 ...

  3. C语言寒假大作战02

    2.2.1 寒假大作战 问题 回答 这个作业属于哪个课程 2019软件四班C语言寒假作业大作战 这个作业要求在哪里 作业要求 我在这个课程的目标是 用switch完成一个menu基本框架 这个作业在那 ...

  4. Cobaltstrike指令/beacon命令大全

    browserpivot 注入受害者浏览器进程bypassuac 绕过UACcancel 取消正在进行的下载cd 切换目录checkin 强制让被控端回连一次clear 清除beacon内部的任务队列 ...

  5. json通过后台获取数据库中的内容，并在前端进行显示

    fastjson.jar以及Echarts树图的js文件(需要在servlet对json进行赋值,所以需要用到json的插件) 链接:https://pan.baidu.com/s/1GBbamPNG ...

  6. 安卓开发实战-记账本APP（五）

    今天将昨天剩余的bug修复,并且完成图标的美化,设置长按删除,模仿支付宝实现金额的动态增加. ①将昨天的布局进行了修改:之前是fragment,改成FrameLayout布局,不再设置name,进而在 ...

  7. BeetleX.AdminUI介绍

    BeetleX.AdminUI是基于Beetlexjs+Vuejs+Bootstrap相结合的后台管理框架,主要介绍在不使用Webpack的情况下,如何用VS来开发一个单页面的Web后台管理应用.如果 ...

  8. 自学Java第三章——《流程控制语句结构》

    流程控制语句结构分为: 1.顺序结构:从上到下依次执行 2.分支结构:多个分支选择其中一个分支执行 3.循环结构:重复执行某些代码 3.1 顺序结构 执行过程:从上到下顺序执行 3.1.1 输出语句 ...

  9. FFMPEG结构体分析：AVCodecParameters

    /** * This struct describes the properties of an encoded stream. * * sizeof(AVCodecParameters) is no ...

  10. MyBatis基础_连接池与事务、动态SQL、注解开发

    一.MyBatis连接池及事务控制 1.连接池 在实际开发中,都会使用连接池,因为它可以减少获取连接缩消耗的时间.所谓连接池,就是存储数据库连接的容器.连接池中存储一定数量的数据库连接,当线程需要使用 ...