css

msie = int((/msie (\d+)/.exec((navigator.userAgent).toLowerCase()) || [])[1]);/* IE 11改变了它的userAgent格式，所以要进一步判断 */if (isNaN(msie)) {    msie = int((/trident\/.*; rv:(\d+)/.exec((navigator.userAgent).toUpperCase()) || [])[1]);}

本条目发布于2014 年 1 月 20 日。属于JavaScript分类。

js手动实现英文字母大小写转换

发表回复

一.将英文字母转换成小写

function manualLowercase(s) {    s.replace(/[A-Z]/g, function(ch) {return String.fromCharCode(ch.charCodeAt(0) | 32);});}

二.将英文字母转换成大写

function manualUppercase(s) {    s.replace(/[a-z]/g, function(ch) {return String.fromCharCode(ch.charCodeAt(0) & ~32);});}

本条目发布于2014 年 1 月 20 日。属于JavaScript分类。

将网页变成灰色的css代码，实现网页哀悼效果

发表回复

想将网页变成黑白的，并不需要把页面图片挨个改成黑白的和将文字变成还白的，只需要为html添加一段css代码即可。

样例代码

-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: url(desaturate.svg#grayscale);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

本条目发布于2013 年 12 月 12 日。属于CSS3分类。

CSS 3新属性之resize详解

发表回复

为了增强用户体验，CSS 3增加了很多新的属性，其中一个重要的属性就是resize，它允许用户通过拖动的方式来修改元素的尺寸。

样例代码：

.box {    width: 600px;    height: 300px;    border: 1px solid #000;    resize: both;    overflow: auto;}

样例图片：

css3 resize

注意的是，如果没有设置overflow，resize不会生效，只要设置了overflow，无论设置的是auto还是hidden，resize都会生效。

本条目发布于2013 年 11 月 22 日。属于CSS3分类，被贴了resize 标签。

CSS 3盒布局之指定水平方向与垂直方向的对齐方式

发表回复

使用盒布局的时候，可以使用box-pack属性一级box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式，使用这两个属性可以很容易的将文字、图像或子元素放置在元素内的各个部位中。

使用box-pack属性时，火狐中需要需要书写成“-moz-box-pack”，在Safari浏览器或Chrome浏览器中需要书写成“-webkit-box-pack”的形式；

使用box-align属性时，火狐中需要书写成“-moz-box-align”，在Safari浏览器或者Chrome浏览器中需要书写成“-webkit-box-align”的形式。

首先元素需要设置成盒布局：display: box;

box-pack属性及box-align属性指定的属性值和各种属性值的含义如下表所示：

属性值排列方向box-pack属性值的含义box-align属性值的含义starthorizontal左对齐，文字、图像或子元素被放置在元素最左边顶部对齐，文字、图像或子元素被放置在元素最顶部centerhorizontal中对其，文字、图像或子元素被放置在元素中部中部对齐，文字、图像或子元素被放置在元素中部endhorizontal右对齐，文字、图像或子元素被放置在元素最右边底部对齐，文字、图像或子元素被放置在元素最底部startvertical顶部对齐，文字、图像或子元素被放置在元素最顶部左对齐，文字、图像或子元素被放置在元素最左边centervertical中部对齐，文字、图像或子元素被放置在元素中部中对其，文字、图像或子元素被放置在元素中部endvertical底部对齐，文字、图像或子元素被放置在元素最底部右对齐，文字、图像或子元素被放置在元素最右边

举一个把文字放在盒子最右下角的例子：

样例代码：

.box {    width: 300px;    height: 300px;    border: 1px solid #000;    display: -webkit-box;    -webkit-box-pack: end;    -webkit-box-align: end;}

样例图片： 

本条目发布于2013 年 11 月 21 日。属于CSS3分类，被贴了box-align、box-pack、盒布局 标签。

CSS 3属性之盒布局box

1条回复

本文讲解一下css3的盒布局如何使用。

在过去想做一个3列布局基本都是用float来实现，如下所示：

示例代码：

<style> .box {     width: 600px;     height: 300px;     border: 1px solid #000; } .box1 {     background-color: orange; } .box2 {     background-color: yellow; } .box3 {     background-color: limegreen; } .box1, .box2, .box3 {     float: left; } </style>

<div class="box">   <div class="box1">      这里是第一区域<br>   </div>   <div class="box2">      这里是第二区域<br>      这里是第二区域   </div>   <div class="box3">      这里是第三区域<br>      这里是第三区域<br>      这里是第三区域   </div></div>

示例图片：

虽然实现了三列布局，但是想实现3列高度动态相同就要废点小劲了，如果改用css3盒布局的话，这个问题将很容易得到解决。

1.使用盒布局

样例代码：

<style> .box {     width: 600px;     height: 300px;     border: 1px solid #000;     display: box;  /* 目前使用时需要加上-webkit-、-mox-，display: -webkit-box */ } .box1 {     background-color: orange; } .box2 {     background-color: yellow; } .box3 {     background-color: limegreen; } .box1, .box2, .box3 {     /*float: left;*/ } </style>

样例图片：

 

可见使用css3盒布局制作自适应等高三列布局非常简单方便。

2.改变元素的显示顺序使用

使用盒布局的时候，可以通过box-ordinal-group属性来改变各元素的显示顺序。可以在每个元素的样式中加上box-ordinal-group属性，该属性使用一个表示序号的整数属性值，浏览器现实的时候根据该序号从小到大来显示这些元素。使用Firefox时需要将其书写成“-moz-box-ordinal-group”的形式；如果使用Safari浏览器或Chrome浏览器，需要书写成“-webkit-box-ordinal-group” 的形式

样例代码：

<style>.box {    width: 600px;    height: 300px;    border: 1px solid #000;    display: box;    display: -webkit-box;}.box1 {    background-color: orange;    -webkit-box-ordinal-group: 2;}.box2 {    background-color: yellow;    -webkit-box-ordinal-group: 3;}.box3 {    background-color: limegreen;    -webkit-box-ordinal-group: 1;}</style>

样例图片：

3.改变元素的排列方向

使用弹性盒布局的时候，我们可以很简单的将多个元素的排列方向从水平修改为垂直方向，或者从垂直方向修改为水平方向。

在css3中，使用box-orient来指定多个元素的排列方向。如果使用Firefox浏览器，写成”-moz-box-orient”，如果使用Safari或者Chrome浏览器，写成“-webkit-box-orient”的形式；

样例代码：

<style> .box {    width: 600px;    height: 300px;    border: 1px solid #000;    display: box;    display: -webkit-box;    -webkit-orient: vertical; } .box1 {    background-color: orange; } .box2 {    background-color: yellow; } .box3 {    background-color: limegreen; } </style>

样例图片：

通过观察以上测试用例，都有一个共同的特点就是每个盒子中都留有一块空白，可以通过box-flex来解决这个问题，我们给box2设置-webkit-box-flex:1;

样例代码：

<style> .box {    width: 600px;    height: 300px;    border: 1px solid #000;    display: -webkit-box;    -webkit-box-orient: vertical; } .box1 {    background-color: orange; } .box2 {    background-color: yellow;    -webkit-box-flex: 1; } .box3 {    background-color: limegreen; } </style>

样例图片：

 

如图所示，之前剩余的空白区域都填充在设置了box-flex:1的第二区域了，这样就实现了高度上动态自适应了，下一步我们同时给第三区域也设置上box-flex:1看看会是怎样的效果

样例代码：

<style> .box {    width: 600px;    height: 300px;    border: 1px solid #000;    display: -webkit-box;    -webkit-box-orient: vertical; } .box1 {    background-color: orange; } .box2 {    background-color: yellow;    -webkit-box-flex: 1; } .box3 {    background-color: limegreen;    -webkit-box-flex: 1; } </style>

样例图片：

 

可以看到第二区域和第三区域共同分担了空白区域，因为它们设置的box-flex都等于1，所以它们平分了空白区域的面积。

这里解释一下box-flex的工作原理，box-flex是用来占据盒子中空白区域的，假设一共有3个子元素分别设置了box-flex：1、box-flex：2、box-flex：3，那么它们所占有的空白区域的面积分别是1/(1+2+3)、2/(1+2+3)、3/(1+2+3)，很多情况下很多人会误解box-flex，认为它在计算面积时是按照盒子总面积计算的，所以就会直接认为子元素会按照box-flex的比例来分割盒子的总面积，实际上并不是这样的，现在我们给第一区域、第二区域、第三区域分别设置box-flex等于1，请看下图：

很明显三个区域的高度并不相同，但是仔细看可以发现3个区域的空白区域的高度都是相同的，原因就是区域总高度不同因为每个区域中内容各自占了不同的高度，空白区域高度相同的原因是它们的box-flex都等于1，所以它们平分了原本应该存在的空白区域。

总之关于box-flex的问题记住一句话就行：它们按照比例分割的是空白区域的面积，而不是盒子的总面积！

 

 

本条目发布于2013 年 11 月 20 日。属于CSS3分类，被贴了box-ordinal-group、box-orient、盒布局 标签。

CSS3属性之多栏布局column

发表回复

本文将针对CSS 3中的多栏布局做详细介绍，使用多栏布局时只能为所有栏指定一个统一的高度，栏与栏之间的宽度不可能是不一样的，另外也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的网页结构时。

1.首先我们先定义个div盒子

<style>.box {    width: 600px;    background-color: #ddd;}</style><div class="box">我爱北京天安门，天安门上太阳升，伟大领袖毛主席，指引我们向前进！。。</div>

样例图片：

2.使用多栏布局第一个属性：column-count

column-count属性为一个数字表示列数，不带单位，含义是将一个元素中的内容分为多栏进行显示。

样例代码：

<style>.box {    width: 600px;    backgrond-color: #ddd;    column-count: 2;}</style>

样例图片：

 

3.使用多栏布局的第二个属性：column-gap

使用column-gap属性来设定多栏之间的间隔距离。

样例代码：

<style>.box {    width: 600px;    backgrond-color: #ddd;    column-count: 2;    column-gap: 60px;}</style>

样例图片：

 

4.使用多栏布局第3个属性：column-rule

column-rule属性在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度、样式、颜色，该属性的指定方法与css中的border属性指定方法相同。

样例代码：

<style>.box {    width: 600px;    backgrond-color: #ddd;    column-count: 2;    column-gap: 60px;    column-rule: 5px dashed #000;}</style>

样例图片：

 

5.使用多栏布局最后一个属性：column-width

column-width可以设置每一栏的宽度，但是在实际测试中发现并不像描述的那么简单，遂列举出以下几个问题

1. 在设定column-width的同时必须设置盒子的width，否则盒子宽度默认为100%，每栏宽度按照栏数平均分。
2. 盒子每栏宽度必须大于等于column-width设定的值，否则就会减少栏数来增加每栏宽度，例如盒子宽度400px，一共2栏，那么每栏宽度就是200px，如果设置column-width: 210px的话盒子就会变成1栏以保证每栏宽度大于等于column-width:210px;，但是如果每栏宽度大于column-width的值时每栏宽度也不会强制等于column-width，这么看column-width的个性有点像min-width。

注：浏览器支持性不做介绍，具体使用时请做具体测试，本人秉着早晚所有浏览器都会支持的态度写此文。

本条目发布于2013 年 11 月 20 日。属于CSS3分类。

CSS3中的动画功能之transtions和animations详解

发表回复

CSS3中的动画功能分为Transitions和Animations功能，这两种功能都可以通过改变CSS中的属性值来产生动画效果。

一.Transitions

语法：transitions: property duration timing-function

• property: 表示对哪个属性进行平滑过渡(可设置为all，则所有属性值变化时均产生动画效果)
• duration: 表示在多长时间内完成属性值的平滑过渡
• timing-function: 表示通过什么方法来进行平滑过渡（具体值下面详细介绍）

样例代码：

transitions: background-color 1s linear;

可同时设置多个属性值：

样例代码：

transitions: background-color 1s linear, color 1s linear, width 1s linear;

可同时设置所有属性值：

样例代码:

transitions: all 1s linear;

二 .Animations

语法：animations: name duration timing-function iteration-count;

• name: 关键帧集合名（通过此名创建关键帧的集合，见下面样例代码）
• duration: 表示在多长时间内完成属性值的平滑过渡
• timing-function: 表示通过什么方法来进行平滑过渡（具体值下面详细介绍）
• iteration-count: 迭代循环次数，可设置为具体数值，或者设置为infinite进行无限循环，默认为1

样例代码：

.box {    background-color: red;    -webkit-animation: mycolor 4s linear infinite; } @-webkit-keyframes mycolor {     0% {        background-color: red;     }     40% {         background-color: darkblue;     }     70% {        background-color: yellow;     }     100% {        background-color: green;     } }

 三.实现动画的方法

• linear                      在动画开始时到结束时以同样的速度进行改变
• ease-in                   动画开始时速度很慢，然后速度沿曲线值加速
• ease-out                 动画开始时速度很快，然后速度沿曲线值减速
• ease                        动画开始速度很慢，然后速度沿曲线值加速，然后再沿曲线值减速
• ease-in-out            同ease

注：浏览器支持性不做介绍，具体使用时请做具体测试，本人秉着早晚所有浏览器都会支持的态度写此文。

本条目发布于2013 年 11 月 19 日。属于CSS3分类，被贴了animations、ease、transitions、动画 标签。

CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

发表回复

在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。

一.旋转 rotate

用法：transform: rotate(45deg);

共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

二.缩放 scale

用法：transform: scale(0.5)  或者  transform: scale(0.5, 2);

参数表示缩放倍数；

• 一个参数时：表示水平和垂直同时缩放该倍率
• 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

三.倾斜 skew

用法：transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

参数表示倾斜角度，单位deg

• 一个参数时：表示水平方向的倾斜角度；
• 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

关于skew倾斜角度的计算方式表面上看并不是那么直观，这里借鉴某大拿绘制的图举例说明一下：

首先需要说明的是skew的默认原点transform-origin是这个物件的中心点

skewX(30deg) 如下图：

 

skewY(10deg) 如下图：

 

skew(30deg, 10deg) 如下图：

 

我当初就是看到此图瞬间理解的。

四.移动 translate

用法：transform: translate(45px)  或者 transform: skew(45px, 150px);

参数表示移动距离，单位px，

• 一个参数时：表示水平方向的移动距离；
• 两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

五.基准点 transform-origin

在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

用法：transform-origin: 10px 10px;

共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

六.多方法组合变形

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法，这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate

注：浏览器支持性不做介绍，具体使用时请做具体测试，本人秉着早晚所有浏览器都会支持的态度写此文。

本条目发布于2013 年 11 月 19 日。属于CSS3分类，被贴了rotate、scale、skew、transform、transform-origin、translate 标签。

CSS3属性border-image详解（边框图片）

发表回复

border-image一共有4项参数，本文将对这4项参数依次讲解及举例说明，为了方便理解，先介绍最常用的使用方式。

语法：border-image: url(bbs0101.png) A B C D；  第一个参数url就是背景图片路径，不做过多解释，其次4个参数ABCD表示4个像素值，不需要带单位，默认为px，同时也可以设置为百分比，百分比是针对背景图片计算的，比如图片宽100px，A=20%=100px*20%=20px，依次代表距离图片上边缘、右边缘、下边缘、左边缘的距离，如图所示：

border-image详解

当设置好ABCD四个值之后，相当于按照这4个值对图片切了4刀，形成一个九宫格，此时我们需要按照以下两步分析border-image的工作原理：

1. 首先分离出left-top、right-top、left-bottom、right-bottom这四块图片分别对应放到盒子border的四个角上，同时按照盒子border四个角的尺寸进行缩放直至铺满
2. 然后分离出每条边中间的区域即A、B、C、D所在的四个区域，分别放到盒子border的对应4个位置上，同时按照border对应区域的尺寸进行缩放直至铺满

背景图如图所示：此图尺寸为90*90 中间所有小菱形等尺寸。

源背景图片

样例代码：

.box5 {    border: 20px;    width: 60px;    height: 60px;    border-image: url(images/border-image.png) 30 30 30 30; }<div class="box5"></div>

样例图片：

border-image

此时可以说此种情况（border-image: url(bbs0101.png) A B C D；）的border-image已经完成渲染工作，不过这里的第二步中采用的是拉伸方式（默认方式：stretch）铺满边框，我们还可以手动设置成repeat以按照平铺方式渲染，如下：

语法：border-image: url(bbs0101.png) A B C D repeat repeat;

样例代码：

.box5 {    border: 20px;    width: 60px;    height: 60px;    border-image: url(images/border-image.png) 30 30 30 30 repeat repeat; }<div class="box5"></div>

样例图片：

border-image:repeat

这段样式中总共写了2个repeat，第一个repeat定义上边（A区域）和下边（C区域）是否进行水平重复，第二个repeat定义左边（D区域）和右边（B区域）是否进行垂直重复，举例如下：

样例代码：

.box5 {    border: 20px;    width: 60px;    height: 60px;    border-image: url(images/border-image.png) 30 30 30 30 repeat stretch; }

样例图片：

border-image

以上的样例中边框宽度是通过设置border：20;来完成的，这里需要声明一下，如果想使用border-image属性则border必须存在且border-width必须要大于0，但是是不是只能border的尺寸来控制border-image的尺寸呢，我这么问当然就不是了，这里再介绍border-image的最后一个参数W

语法：border-image: url(bbs0101.png) A B C D/W repeat repeat;

W为border-image各边框宽度，设置时需要带上单位px，即使设置了W，也不能设置border-width=0！

样例代码：

.box5 {    border: 20px;    width: 60px;    height: 60px;    border-image: url(images/border-image.png) 30 30 30 30/W repeat stretch; }

样例图片：从上到下依次为W=10px、W=20px、W=30px

W=10px

W=20px

W=30px

以上已经将border-image的所有参数都讲解了一下，以下将对一些特殊情况以及一些小技巧进行一下举例说明：

一.当只设置url一个属性的时候，A=C=图片height，B=D=图片width

样例代码：

.box5 { border: 20px; width: 60px; height: 60px; border-image: url(images/border-image.png); }

样例图片：

border-image

二.当只设置一个切割尺寸P的时候，A=B=C=D=P

样例代码：

.box5 {    border: 20px;    width: 60px;    height: 60px;    border-image: url(images/border-image.png) 30; }

样例图片：

border-image

三.当只设置一个重复方式的时候，表示四条边框重复方式相同

样例代码：

.box5 {    border: 20px;    width: 60px;    height: 60px;    border-image: url(images/border-image.png) 30 repeat; }

样例图片：

border-image:repeat.

此外针对重复方式还有一个属性就是round，意思是平铺，据说和repeat是有区别的，但是目前没有浏览器体现出round和repeat的区别，所以暂不考虑round属性。

注：浏览器支持性不做介绍，具体使用时请做具体测试，本人秉着早晚所有浏览器都会支持的态度写此文。

一个小小的border-image属性，原本以为几句话可以说清楚，没想到写了满满一页还觉得说的不够详细，以后慢慢完善吧，今天实在是不想写了，如果有一定基础的你想必能看懂吧，O(∩_∩)O哈哈~