详解css3系列:补遗

赞助我以写出更好的文章,give me a cup of coffee?


这篇文章主要是对css3系列详解的一个补充,也是对余下的知识点的一个归纳,主要是余下的知识点较少也较容易懂,而本人非较长文章不写,所以拿了几个知识点堆叠起来凑数吧。

box-sizing属性

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box

  • content-box:让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content 的宽度/高度决定,设置width/height属性指的是content部分的宽/高

  • border-box:让元素维持IE传统盒模型(IE6以下版本和IE6~7的怪异模式)。设置width/height属性指的是border + padding + content

标准浏览器下,按照W3C规范对盒模型解析,一旦修改了元素的边框或内距,就会影响元素的盒子尺寸,就不得不重新计算元素的盒子尺寸,从而影响整个页面的布局。

在标准w3c盒模型中,widthheight指的是内容区域的宽度和高度。增加padding、边框和空白边不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

对内联元素设置margin-top,margin-bottom无效。设置padding才有效

box-shadow

E:{box-shadow: h-shadow(必需) v-shadow(必需) blur spread color inset;}

即:

对象选择器 {box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式} 

X轴偏移量和Y轴偏移量均可为负值,X轴偏移量为值时,向左偏;

Y轴偏移量为值时,向上偏。

除此之外,box-shadow还可以添加一个或多个阴影,当有多个值时用逗号分开,如果设置投影方式为inset时,则为内投影,如果不设置,则默认为外阴影。

IE9以下是不支持CSS3box-shadow的,但为了处理这个兼容问题,我们可以在IE下使用IEshadow阴影滤镜来实现

   filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值), Strength=阴影半径(数值)

该滤镜必须配合background属性一起使用,否则该滤镜失效。

.demo{
   box-shadow: -2px 0 0 green, /*左边阴影*/
   0 -2px 0 blue, /*顶部阴影*/
   0 2px 0 red, /*底部阴影*/
   2px 0 0 yellow; /*右边阴影*/
   -webkit-box-shadow:0 0 10px 10px rgba(0,0,0,0.8) inset;//内阴影
 }
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

box-shadow可以多层阴影同时使用,每层阴影之间用逗号隔开。最先写的阴影将显示在最顶层

实现翘边阴影效果

效果
详解css3系列:补遗

HTML代码:
<div class="box shadow"></div>

CSS代码:

.box {
    width: 300px;
    height: 100px;
    background: #ccc;
    border-radius: 10px;
    margin: 10px;
}

.shadow {
    position: relative;
    max-width: 270px;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),/* 外阴影*/
                0px 0px 20px rgba(0,0,0,0.1) inset;/*内阴影*/
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   transform:rotate(-3deg);
}

.shadow::after{
   right:10px;
   left:auto;
   transform:rotate(3deg);
 }

伪元素before和after意思是在被选元素的内容前或后 插入内容

text-shadow


E:{text-shadow: h-shadow v-shadow blur color;}

附:E即Element,元素的意思。

兼容IE的写法:

滤镜语法:

  E {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}

Direction用于设定投影的主向,取值为0即零度(表示向上方向),45为右上,90为右,135为右下,180为下方,225为左下方,270为左方,315为左上方;Strength就是强度,类似于text-shadow中的blur值。

Border-radius

border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。

border-radius: 2em 1em 4em / 0.5em 3em;

等价于:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Gradient渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

线性渐变在Webkit下的应用

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法

第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。
第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left
top(左上角)和left bottom(左下角)。
第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

线性渐变在Mozilla下的应用

语法:

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

参数:

其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left
top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

RGBA和opacity

语法:

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数| 百分数

A:透明度。取值0~1之间

/* IE6 - 8 */
filter: alpha(opacity=80);
/* 其他 */
opacity: 0.8;

详解css3系列:补遗

RGBA比元素设置CSS的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度。

column多列属性

column-count:栏目数

兼容性写法:

-webkit-column-count:3
-moz-column-count:3

column-width 属性规定列的宽度。

column-gap属性规定列之间的间隔
column-rule 属性设置列之间的宽度、样式和颜色规则。

media query

使用方法:

@meida 设备类型 and (设备特征){样式代码}

设备类型

详解css3系列:补遗

13种设备特性

详解css3系列:补遗

css3的浏览器支持情况

CSS3 属性

详解css3系列:补遗

CSS3 选择器

详解css3系列:补遗

数据来源:http://fmbip.com/litmus