边框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）;

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>11种常用css样式之border学习</title>

     <style type="text/css">

     /*边框简写*/

     .box,.box2{

         padding: 10px;

         border-width: 5px;

     }

     .box{

         /* border: 5px inset red; */

         border-style: inset;

         border-color: red;

     }

     /*边框样式*/

     .box1{

         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;

         border-width: 5px;

         border-color: #f90;

     }

     /*边框方位*/

     .box2{

         margin: 10px;

         border-left: 10px groove cadetblue;

         border-right: 10px ridge magenta;

         border-top: 10px inset yellow;

         border-bottom: 10px outset khaki;

     }

     </style>

 </head>

 <body>

     <div class="box">

         <div class="box1">

             兄弟,好久不见了,挺念叨你的,不知道现在在哪发财,去跟你混了Brother

         </div>

         <div class="box2">

             it's been a long time since I missed you. I don't know where I'm getting rich now.

         </div>

     </div>

 </body>

 </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. Flsak学习笔记（1）

    Day 01 最近项目里要用python写后端,同学推荐了flask框架就来学一学.写这个博客的目的主要是记录一下自己学习的内容,有基础知识忘了不用一个个去百度,还有就是跟大家分享一下,有不是很容易理 ...

  2. [洛谷P4707] 重返现世

    Description 为了打开返回现世的大门,\(Yopilla\) 需要制作开启大门的钥匙.\(Yopilla\) 所在的迷失大陆有 \(n\) 种原料,只需要集齐任意 \(k\) 种,就可以开始 ...

  3. org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.TooManyResultsException: Expected one result (or null) to be returned by selectOne(), but found: 3报错解决

    报错的原因翻译出来: 预期的一个结果(或null)返回selectOne(),但发现:3 意思就是你想得到一个结果值,但是返回了三个结果值. 一般可能测试的时候我们存了几条一样的数据,在登录时,会把同 ...

  4. Frameworks.Entity.Core 5 EntityValidation

    Project.Core\Frameworks.Entity.Core\EntityValidation\ EntityValidation 1  数值验证DigitAttribute.cs Digi ...

  5. 创建过滤扩展方法 Creating Filtering Extension Methods 精通ASP-NET-MVC-5-弗瑞曼 Listing 4-17

  6. Java容器解析系列(16) android内存优化之SparseArray

    HashMap的缺点: 自动装箱导致的性能损失; 使用拉链法来解决hash冲突,如果hash冲突较多,需要遍历链表,导致性能下降,在Java 8 中,如果链表长度>8,会使用红黑树来代替链表; ...

  7. GIMP(Linux下的Photoshop)，Centos7下安装过程

    点当然是上官网:https://www.gimp.org/ 这英语看不懂,果断用谷歌的网页翻译. 点下载,就会有 看到这个,就点 下载一个安装的包 用命令行打上 [root@localhost 下载] ...

  8. Mbp通过筛选器和中间件实现异常,日志,事务及接口返回数据格式化aop处理.

    Mbp应用服务层的AOP实现 实现方法:asp.net core mvc 筛选器 + 中间件 日志,事务,和接口返回结果统一格式化采用操作筛选器,而异常处理采用中间件来处理. 最开始,我是打算用aut ...

  9. sql 映射文件

                                                                                                        ...

  10. 命令行下使用RAR和7-Zip压缩数据

    3.6.1 RAR Winrar的命令行模式程序在安装目录下的 rar.exe (打包压缩程序),unrar.exe(解压缩程序) WinRAR的常用参数如下: -a 添加文件到压缩文件 -k 锁定压 ...