CSS魔法堂:重拾Border之——解构Border
前言
当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-color
和border-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规则
- 颜色从外至内排列;
- 每种颜色占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的更多相关文章
- CSS魔法堂:Position定位详解
一.Position各属性值详解 1. static :默认值,元素将按照正常文档流规则排列. 2. relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top. ...
- CSS魔法堂:重拾Border之——更广阔的遐想
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂:重拾Border之——不仅仅是圆角
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂:重拾Border之——图片作边框
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂:Box-Shadow没那么简单啦:)
前言 说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...
- CSS魔法堂:说说Float那个被埋没的志向
前言 定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...
- CSS魔法堂:你真的懂text-align吗?
前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...
- CSS魔法堂:深入理解line-height和vertical-align
前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...
- CSS魔法堂:display:none与visibility:hidden的恩怨情仇
前言 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...
随机推荐
- 使用Javascript来实现二级联动菜单的效果
效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=[" ...
- NLP--十项沟通前的思想准备
如何达到有效沟通?sino NLP课程给我们十项针对沟通前的思想准备,可让我们了解怎样做到效果卓越的沟通: 1.建立和谐气氛. 这是有效沟通的前提条件,只有首先建立一个和谐的气氛,双方才能彼此敞开心扉 ...
- [译] 理解PHP内部函数的定义(给PHP开发者的PHP源码-第二部分)
文章来自:http://www.hoohack.me/2016/02/10/understanding-phps-internal-function-definitions-ch 原文:https:/ ...
- 玩转JavaScript OOP[3]——彻底理解继承和原型链
概述 上一篇我们介绍了通过构造函数和原型可以实现JavaScript中的“类”,由于构造函数和函数的原型都是对象,所以JavaScript的“类”本质上也是对象.这一篇我们将介绍JavaScript中 ...
- ASP.Net请求处理机制初步探索之旅 - Part 2 核心
开篇:上一篇我们了解了一个请求从客户端发出到服务端接收并转到ASP.Net处理入口的过程,这篇我们开始探索ASP.Net的核心处理部分,借助强大的反编译工具,我们会看到几个熟悉又陌生的名词(类):Ht ...
- Unity3D游戏开发初探—1.跨平台的游戏引擎让.NET程序员新生
一.Unity3D平台简介 Unity是由Unity Technologies开发的一个让轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的 ...
- SharpFileDB - a file database for small apps
SharpFileDB - a file database for small apps 本文中文版在此处. I'm not an expert of database. Please feel fr ...
- iOS 代码规范
1 目的 统一规范XCode编辑环境下Objective-C.swift的编码风格和标准 2 适用范围 适用于所有用Objective-C,swift语言开发的项目. 3 编码规范 3.1 文件 项目 ...
- javascript技术难点(三)之this、new、apply和call详解
4) this.new.call和apply的相关问题 讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本 ...
- javascript 闭包
闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...