边框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. [洛谷P2962] [USACO09NOV] 灯Lights

    Description Bessie and the cows were playing games in the barn, but the power was reset and the ligh ...

  2. EditPlus 添加 打开文件所在文件夹 功能

    添加自定义工具: Tools -> Configure User Tools... -> Add Tool >> Menu Text: 打开所在的文件夹 Command: ex ...

  3. JDBC详细说明+使用

    JDBC详解 一.相关概念 1.什么是JDBC JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提 ...

  4. VScode前端插件推荐

    工欲善其事,必先利其器,安利一波前端插件. Chinese (Simplified) Language Pack for Visual Studio CodeVScode汉化插件 Beautify代码 ...

  5. HTTP负责均衡模块(HTTP Upstream)

    这个模块为后端的服务器提供简单的负载均衡(轮询(round-robin)和连接IP(client IP))如下例: upstream backend  {  server backend1.examp ...

  6. rabbitmq使用总结

    rabbitmq 架构图 RabbitMQ 中的 broker 是指什么?cluster 又是指什么 broker 是指一个或多个 erlang node 的逻辑分组,且 node 上运行着 Rabb ...

  7. svg微信公众号推文实现点击显示答案

    svg微信公众号推文实现点击显示答案 大家都知道微信公众号推文不能写js 所以不能加点击事件 其实是对的 确实不能写js 但是点击事件可以用svg写  svg代码可不会隐蔽 下面我直接贴代码 < ...

  8. Linux下的openssh详解

    前言 SSH(Secure Shell)是一个提供数据通信安全.远程登录.远程指令执行等功能的安全网络协议,由芬兰赫尔辛基大学研究员Tatu Ylönen,于1995年提出,其目的是用于替代非安全的T ...

  9. Shell常用命令之yum

    介绍 yum命令是在Fedora和RedHat以及SUSE中基于rpm的软件包管理器,它可以使系统管理人员交互和自动化地更细与管理RPM软件包,能够从指定的服务器自动下载RPM包并且安装,可以自动处理 ...

  10. screen配置窗口显示

    screen的下方不显示,可以复制如下的代码 cd /root && vim .screenrc 贴上如下内容 hardstatus on hardstatus alwayslastl ...