本文更新版链接

一、border

关于border的3个属性，分别为border-width、border-style、border-color。

其中，border-color默认为元素内容的前景色；border-width默认为关键字medium，但是border-style默认值为none；所以，不指定border-style，边框将不存在。

关于border-color

transparent，据说特定情况下有奇效，需要知道有这样一个可选值。

white，白色的dotted边框，有时候会有奇效。

比如：

更确切地说，应该是颜色与父元素的背景颜色一样的dotted/dashed边框。

8种border-style：

（只有记住了，才能在需要的时候合理使用。）

关于mixed border

利用CSS的层叠，我们甚至可以为四个方向上的边框分别设置不同的宽度、样式和颜色，取决于具体情况。

小tips：边框模拟，等高布局

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>边框模拟等高布局</title>
  6.          <style>
  7.              div.container {
  8.                  margin-left: 200px;
  9.                  overflow: hidden;
  10.              }
  11.  
  12.              div.box {
  13.                  width:300px;
  14.                  float: left;
  15.  
  16.              }
  17.  
  18.              div.box1 {
  19.                  background-color: brown;
  20.                  border-right: 300px solid green;
  21.                  margin-right: -300px;
  22.              }
  23.  
  24.              p {
  25.                  margin-bottom: 50px;
  26.              }
  27.  
  28.          </style>
  29.      </head>
  30.      <body>
  31.          <div class="container">
  32.              <div class="box box1">
  33.                  <p>box1</p>
  34.                  <p>box1</p>
  35.                  <p>box1</p>
  36.                  <p>box1</p>
  37.                  <p>box1</p>
  38.                  <p>box1</p>
  39.                  <p>box1</p>
  40.              </div>
  41.              <div class="box box2">
  42.                  <p>box2</p>
  43.                  <p>box2</p>
  44.                  <p>box2</p>
  45.              </div>
  46.          <div class="container">
  47.      </body>
  48.  </html>

其实现原理为：左列边框宽度与margin负值相结合，让右边框成为右列的背景。

二、border-radius

语法规则：

border-radius:a b c d; 顺序依次为上左、上右、下右、下左。（顺时针方向）

border-radius:a b c d/a b c d ;第一组为水平数值，第二组为垂直数值。

border-top-left-radius:a b; 单个圆角的设立。

（定义单个圆角时，一定要先上下、后左右，否则无效。）

注意：

圆角生效并不以边框的存在为前提，也就是说，即使没有边框，也能设立圆角。

小tips：border-radius:50%

三、border-image

与border-radius不同，border-image以border的存在为前提；其本质是将border-style替换成image。

语法规则：

border-image-source

支持none和url两种选择；（如果是none的话，下面就不用看了。。。）

border-image-slice

按top、right、bottom、left的顺序指定九宫格的切法；支持纯数字和百分数。

（纯数字自带px单位；百分数以图像的宽高为基准计算。）

fill，可选；默认情况下第九区是不显示的；指定了fill才会显示出来；在border-image-slice中指定。

border-image-width

按top、right、bottom、left的顺序指定border-image-width，覆盖border-width；可选。

经测试，border-image-width大于border-width时，会向内扩展（外面那条线不变，向里面扩展增加宽度），但是只是它的独角戏，除了它自己发生了变化之后，其它任何东西都不会变化；它会侵入padding区甚至内容区。

border-image-width小于border-width时，会向外收缩（外面那条线不变，里面这条线向外收缩），与padding区或者内容区留出空隙。

可以为0，即border-image不存在；但不能为负值。

（个人建议，此属性看看就好，就让它默认等于边框的宽度吧。）

border-image-outset

按top、right、bottom、left的顺序指定图像向外移动的距离；可选；支持像素距离和纯数字。

像素距离好理解，20px就是移动20px的意思；纯数字是指border-width的倍数。（注意，是border-width，不关border-image-width的事。）

请注意，这里用的是移动这个词，并不是扩展。

border-image-repeat

按top、right、bottom、left的顺序指定如何填充边框的空白；接受两个值，一个水平方向，一个垂直方向。

默认stretch（拉伸），可选repeat（重复）和round（平铺）。

这里只是一些我对这些属性使用方法上的总结，并没有对属性本身的含义与机制作出说明。

关于这5个属性的具体说明，推荐一篇文章，css3:border-image边框图像详解，写得很好，非常仔细，我这么小白都看懂了。

outline

outline-width、outline-style、outline-color；语法和表现都和border一样，但是不占任何文档空间。

outline-offset，定义outline和border（padding、content area）的距离，与margin没有关系。

四、box-shadow

语法规则：

h-shadow（必需，水平阴影的位置，可负）；

v-shadow（必需，垂直阴影的位置，可负）；

blur（可选，模糊距离）；

spread（可选，阴影的尺寸）；

color（可选，阴影的颜色）；

outset（默认）/inset（可选，将外部阴影改为内部阴影）。

box-shadow应用

CSS：

  1.  .container {
  2.      width:200px;
  3.      height:100px;
  4.      background-color: #ccc;
  5.      border:10px solid red;
  6.      border-radius: 10px;
  7.      box-shadow: 0 0 0 10px green;
  8.  }

效果：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title></title>
  6.          <style>
  7.              body {
  8.                  margin:0;
  9.              }
  10.  
  11.              .container {
  12.                  width:200px;
  13.                  margin: 0 auto;
  14.                  box-shadow: 0 4px 8px rgba(0,0,0,0.3),0 8px 16px rgba(0,0,0,0.5) ;
  15.              }
  16.  
  17.              p {
  18.                  position: absolute;
  19.                  margin: -40px 0 0 50px ;
  20.              }
  21.  
  22.          </style>
  23.       <body>
  24.       <div class="container">
  25.          <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:200px;height:300px" />
  26.          <p>I am "萌萌哒".</p>
  27.      </div>
  28.      </body>
  29.  </html>

CSS border系列的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  2. CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. IE CSS Bug 系列

    1.[IE CSS Bug系列]IE6&IE7图片链接无效 <!doctype html> <html> <head> <meta charset=& ...

  4. HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

    上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...

  5. CSS 魔法系列：纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  6. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  7. CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  9. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

随机推荐

  1. PAT甲题题解-1070. Mooncake (25)-排序，大水题

    #include <iostream> #include <cstdio> #include <algorithm> #include <string.h&g ...

  2. 计算机启动出现 Invalid Partition Table

    计算机启动出现 Invalid Partition Table 解决办法 使用大白菜启动盘进入临时系统,打开程序DiskGenius 如果系统盘(一般为 C 盘)非活动状态,先激活 如果装系统的硬盘不 ...

  3. Visual Studio的安装应用及单元测试

    新建项目—Visual C#—类库 一.Visual Studio的安装 这可能是自己安装软件用的的最长时间的一次 ..刚下载完安装的时候灰常的尴尬,因为2013版本和2015的版本都是不支持在win ...

  4. ElasticSearch 2 (17) - 深入搜索系列之部分匹配

    ElasticSearch 2 (17) - 深入搜索系列之部分匹配 摘要 到目前为止,我们介绍的所有查询都是基于完整术语的,为了匹配,最小的单元为单个术语,我们只能查找反向索引中存在的术语. 但是, ...

  5. C#简述（一）

    详情请参考:http://www.runoob.com/csharp/csharp-tutorial.html 1.C# 是一个简单的.现代的.通用的.面向对象的编程语言,它是由微软(Microsof ...

  6. [转帖]VMware Vsphere 6.0安装部署 （一） 总体部署架构

    (一)总体部署架构本教程用于学习目的,力求详尽的介绍安装部署过程和各组件之间的关系,部署过程从最简单的模型开始,系列文章按时间顺序依次展开,每篇介绍一个组件. 开始阶段,按照一台物理服务器,部署所有V ...

  7. vsphere web client 使用中文的解决办法

    1. 很多网站这么说的: vsphere web client的默认URL为:https://hostname:9443/vsphere-client 可以在URL后面加上一个参数来指定区域语言 英语 ...

  8. Entity Framework Plus

    ZZZ Project 这家外国公司,有很多关于.NET和数据访问的项目,有收费的,有开源的,我之前介绍过 Z.ExtensionMethods 一个强大的开源扩展库 就出自该名下,其他有 如下 1. ...

  9. MT【164】条件化简

    (2017北大优特测试第9题) 已知实数 \(a_i\)(\(i=1,2,3,4,5\))满足 \((a_1-a_2)^2+(a_2-a_3)^2+(a_3-a_4)^2+(a_4-a_5)^2=1\ ...

  10. MT【86】两个绝对值之和最大

    分析:这里只需要注意到$(|x|+|y|)_{max}=max\{|x+y|,|x-y|\}$,所以只需求$max\{|20a|,|14b|\}$ 进而变成熟悉的反解系数问题.容易知道最大值为$a=2 ...