摘要
首先呢,大家应该都知道雅虎35条前端黄金法则;其中有一条就是说;可以使用CSS3实现的坚决不用JavaScript实现;这也是我为什么写CSS3的原因;
另外在动画方面,CSS3的动画效果,稳定性上面要远比JQ一些封装的动画性能要强;加上一些新增加的选择器;可以说CSS现在已经很强大了;
1:CSS3的选择器
](http://upload-images.jianshu.io/upload_images/4364838-4e91d36aa1af0e00.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2:C3新特性
a:有三句话大家可能常用;但是还不容易记住,反正我是这样
就是超出部分不换行并且以省略号的形式显示
white-space: nowrap;//超出部分不换行;
overflow: hidden;//超出部分隐藏
text-overflow: ellipsis;//用点好代替修建的文本;
b:将chrome盒模型转化成标准的IE模型;就是使用
box-sizing:border-box;
box-sizing:content-box;//这个是chrome默认的一个属性;
c:text-shadow:
text-shadow:h-shadow v-shadow [blur] color
h-shadow : 横轴偏移距离
v-shadow : 纵轴偏移距离
blur : 模糊半径 这个属性可写可不写
color : 颜色
下面是自己截图的时候写的一些
div:nth-child(1){
text-shadow: 5px 2px red;
}
div:nth-child(2){
text-shadow: 2px 0px 5px red,
-2px 0px 5px blue,
0px -2px 10px yellow;
}
d:border-radius;
div:nth-child(1){
/*
一个值：4 个角
两个值： 左上-右下 右上-左下
三个值：左上 右上-左下 右下
四个值：左上 右上 右下 左下
*/
/*border-radius: 5px;*/
/*border-radius: 10px 20px;*/
/*border-radius: 10px 5px 20px;*/
/*border-radius: 5px 10px 15px 20px;*/
/* 横轴/纵轴 不同大小的圆角*/
/*border-radius: 30px/10px;*/
border-radius: 10px 20px 5px/30px;
}
div:nth-child(2){
/*非简写形式纵轴始终写在前*/
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 25px;
}
div:nth-child(3){
border-radius: 50%/25%;
}
border-radius.jpeg
e:渐变;
div{
width:100px;
height:100px;
display: inline-block;
border:1px solid;
}
.box1{
background: linear-gradient(red,blue);
}
.box2{
background: linear-gradient(red,yellow,blue,green,purple,pink);
}
.box3{
background: linear-gradient(red 10%,blue);
}
.box4{
background: linear-gradient(45deg,red 70px,blue 70px);
}
.box5{
/*height: 14px;
border-radius: 8px;*/
background: repeating-linear-gradient(45deg,red,red 10px,blue 10px,blue 20px,yellow 20px,yellow 30px);
}
.box6{
background: radial-gradient(red,blue);
}
.box7{
background: radial-gradient(20px 40px ellipse,red,blue);
}
.box8{
background: radial-gradient(circle at top left,red,blue);
}
.box9{
background: radial-gradient(100px 20px,red,blue);
}
.box10{
background: radial-gradient(20px 30px at 20px 80px, red,blue);
}
需要的自己测试吧,可以尝试用渐变写一个谷歌logo出来,当时学习的时候写过现在忘了;
渐变.jpeg
f:镜像 ,mirror
body{
margin:0;
padding:0;
background: purple;
}
img{
display: block;
}
img:nth-child(1){
-webkit-box-reflect:below 0 linear-gradient(transparent 60%,rgba(255,255,255,.4));
}
img:nth-child(2){
margin-left:200px;
-webkit-box-reflect:above;
}
img:nth-child(3){
margin-left:400px;
-webkit-box-reflect:left;
}
img:nth-child(4){
-webkit-box-reflect:right;
}
//自行测试吧;大家知道有这个功能就行了;万一用的上的话呢;
