练手结束;明天开始写VUE,下面是一些CSS3的内容

摘要

首先呢,大家应该都知道雅虎35条前端黄金法则;其中有一条就是说;可以使用CSS3实现的坚决不用JavaScript实现;这也是我为什么写CSS3的原因;
另外在动画方面,CSS3的动画效果,稳定性上面要远比JQ一些封装的动画性能要强;加上一些新增加的选择器;可以说CSS现在已经很强大了;

1:CSS3的选择器

 ](https://img.haomeiwen.com/i4364838/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;
        }
  //自行测试吧;大家知道有这个功能就行了;万一用的上的话呢;
  ![](../../girl_400x500_1.png)
    ![](../../girl_400x500_1.png)
    ![](../../girl_400x500_1.png)
    ![](../../girl_400x500_1.png)

下一篇:css3重头戏;css3动画