前言

 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比例分配元素宽度时,不禁会问"我真的懂border吗?"。本系列将稍微深入探讨一下那个貌似没什么好玩的border!

《CSS魔法堂:重拾Border之——解构Border》

《CSS魔法堂:重拾Border之——图片作边框》

《CSS魔法堂:重拾Border之——不仅仅是圆角》

《CSS魔法堂:重拾Border之——更广阔的遐想》

解构Border

 说起border我们自然会想起border box,而border box由4条紧紧包裹着padding box的边(line)组成,所以border的最小操作单元是line。

 line具有厚度(line thickness)、样式(line pattern)和颜色(line color)3个特性,因此我们必须也只能围绕它们做文章了!

Line Thickness

border-width:(medium|thin|thick|<length>){1,4}

默认值medium,当font-size为17px或以下时,medium为1px、3px或5px,具体有UA决定。

大小关系:thin <= medium <= thick

另外有4个子属性border-top/right/bottom/left-width:medium|thin|thick|<length>

Line Color

border-color:(<color>|transparent){1,4}|inherit

默认值与color属性值一致

<div style="color:red;border:solid;">hello world</div>

另外有4个子属性border-top/right/bottom/left-color:<color>|transparent|inherit

Line Patterns

border-style:(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset){1,4}

默认值none,表示忽略border-colorborder-width的属性值,打死不显示border。

hidden,效果与none一样,只是应用于border-collapsed的表格上时不会发生冲突而已。



注意:各浏览器的效果是有差异的哦!

另外有4个子属性border-top/right/bottom/left-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

合体技——一次搞定Thickness、Pattern和Color

border: <border-width>? <border-style> <border-color>?

其中<border-width><border-color>是可选,而<border-style>为必填项。

另外有4个子属性border-top/right/bottom/left:<border-width>? <border-style> <border-color>?

自定义彩虹——border-top/right/bottom/left-colors

border-top/right/bottom/left-colors:(<color>|transparent){1,}|inherit

 多颜色border规则

  1. 颜色从外至内排列;
  2. 每种颜色占1px。若border-width大于颜色种类,则最后一种颜色占据剩余的宽度;若border-width小于颜色中类,则舍弃多余的颜色。

     兼容性:就FF3.0+支持而已

  <style type="text/css">
.box{
width: 100px;
height: 100px;
border: 10px solid;
-moz-border-top-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
-moz-border-right-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
-moz-border-bottom-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
-moz-border-left-colors: rgb(255,0,0) rgb(255,165,0) rgb(255,255,0) rgb(0,255,0) rgb(0,127,255) rgb(0,0,255) rgb(139,0,255);
}
</style>
<div class="box">
</div>

总结

 尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/5436087.html_肥仔John

感谢

CSS Backgrounds and Borders Module Level 3 4. Borders

CSS魔法堂:重拾Border之——解构Border的更多相关文章

  1. CSS魔法堂:Position定位详解

    一.Position各属性值详解   1.  static :默认值,元素将按照正常文档流规则排列.   2.  relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top. ...

  2. CSS魔法堂:重拾Border之——更广阔的遐想

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  3. CSS魔法堂:重拾Border之——不仅仅是圆角

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  4. CSS魔法堂:重拾Border之——图片作边框

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  5. CSS魔法堂:Box-Shadow没那么简单啦:)

    前言  说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...

  6. CSS魔法堂:说说Float那个被埋没的志向

    前言  定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...

  7. CSS魔法堂:你真的懂text-align吗?

    前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...

  8. CSS魔法堂:深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...

  9. CSS魔法堂:display:none与visibility:hidden的恩怨情仇

    前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...

随机推荐

  1. 使用Javascript来实现二级联动菜单的效果

    效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=[" ...

  2. NLP--十项沟通前的思想准备

    如何达到有效沟通?sino NLP课程给我们十项针对沟通前的思想准备,可让我们了解怎样做到效果卓越的沟通: 1.建立和谐气氛. 这是有效沟通的前提条件,只有首先建立一个和谐的气氛,双方才能彼此敞开心扉 ...

  3. [译] 理解PHP内部函数的定义(给PHP开发者的PHP源码-第二部分)

    文章来自:http://www.hoohack.me/2016/02/10/understanding-phps-internal-function-definitions-ch 原文:https:/ ...

  4. 玩转JavaScript OOP[3]——彻底理解继承和原型链

    概述 上一篇我们介绍了通过构造函数和原型可以实现JavaScript中的“类”,由于构造函数和函数的原型都是对象,所以JavaScript的“类”本质上也是对象.这一篇我们将介绍JavaScript中 ...

  5. ASP.Net请求处理机制初步探索之旅 - Part 2 核心

    开篇:上一篇我们了解了一个请求从客户端发出到服务端接收并转到ASP.Net处理入口的过程,这篇我们开始探索ASP.Net的核心处理部分,借助强大的反编译工具,我们会看到几个熟悉又陌生的名词(类):Ht ...

  6. Unity3D游戏开发初探—1.跨平台的游戏引擎让.NET程序员新生

    一.Unity3D平台简介 Unity是由Unity Technologies开发的一个让轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的 ...

  7. SharpFileDB - a file database for small apps

    SharpFileDB - a file database for small apps 本文中文版在此处. I'm not an expert of database. Please feel fr ...

  8. iOS 代码规范

    1 目的 统一规范XCode编辑环境下Objective-C.swift的编码风格和标准 2 适用范围 适用于所有用Objective-C,swift语言开发的项目. 3 编码规范 3.1 文件 项目 ...

  9. javascript技术难点(三)之this、new、apply和call详解

    4)    this.new.call和apply的相关问题 讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本 ...

  10. javascript 闭包

    闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...