详解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盒模型中,width
和height
指的是内容区域的宽度和高度。增加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
以下是不支持CSS3
的box-shadow
的,但为了处理这个兼容问题,我们可以在IE
下使用IE
的shadow
阴影滤镜来实现
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
可以多层阴影同时使用,每层阴影之间用逗号隔开。最先写的阴影将显示在最顶层
实现翘边阴影效果
效果
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;
RGBA
比元素设置CSS
的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度。
column多列属性
column-count:栏目数
兼容性写法:
-webkit-column-count:3
-moz-column-count:3
column-width
属性规定列的宽度。
column-gap
属性规定列之间的间隔column-rule
属性设置列之间的宽度、样式和颜色规则。
media query
使用方法:
@meida 设备类型 and (设备特征){样式代码}
设备类型
13种设备特性
css3的浏览器支持情况
CSS3 属性
CSS3 选择器