CSS各种样式代码实现

（一）样式实现

1.画虚线并能设置虚线中点的间距

//用渐变
width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;

2.vedio默认样式修改

video::-webkit-media-controls-fullscreen-button {
display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}

3.画一个云，且加上动画

一个云由五个圆形组成，设置不同的位置来组成云的形状

.cloudy {
    background: #60768D;
    border-radius: 50%;
    box-shadow: #60768D 1.2rem -0.2rem 0 -0.1rem, #60768D 0.5rem -0.5rem, #60768D 0.8rem 0.2rem,#60768D 1.5rem 0.2rem 0 -0.2rem;//用阴影画其余的四个圆
    height: 1rem;//先画一个圆
    width: 1rem;
    position: absolute;
    left: .5rem;
    top: 1.8rem;
    z-index: 5;
    -webkit-animation: cloudy 5s ease-in-out infinite;
    -moz-animation: cloudy 5s ease-in-out infinite;
}
@-webkit-keyframes cloudy {
    50% {
        -webkit-transform: translateY(-0.1rem);
    }
}
@-moz-keyframes cloudy {
    50% {
        -moz-transform: translateY(-0.1rem);
    }
}

月亮的光晕效果

@keyframes nucleus {
    0% {
        box-shadow: 0 0 0 transparent;
    }
    50% {
        box-shadow: 0 0 1rem #FCF0BC;
    }
    100% {
        box-shadow: 0 0 0 transparent;
    }
}

4.始终保证一行有七个元素（grid布局）

（1）固定间距，但不固定子元素大小

   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   display: grid;
   column-gap: 60px;
   row-gap: 10px;

（2）固定子元素大小，不固定间距

    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px;
    display: grid;
    justify-content: space-between;

（二）基础知识

1.3d元素

1. 3d视图：

设置一个元素的transform-style:preserve-3d，只影响这个元素的子元素（如果孙元素也有3d效果，那么还必须给子元素设置preserve-3d）。这样所有子元素都可以相对与父元素的平面进行3d变形操作。和二维变形一样，三维变形可以使用transform属性来设置。可以通过制定的函数或者通过三维矩阵来对元素变型。可以呈现3d的属性有：translate3d、scale3d、rotateX、rotateY、rotateZ等等 2. 透视/景深效果：perspective(length)为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。简单的来说就是假想下，当我们看一个房子的时候，比如房子有200米长，在房里里面与在房子外面，看到的角度都是不一样的，当设置perspective<200的时候，就是我们在房里看，如果perspective>200或者更多的时候，就相当在外面看，而且越远看房子的角度大小也就不一样

• 当元素没有设置perspective(length)时，所有后代元素被压缩在同一个二维平面上，不存在景深的效果。如果设置perspective(length)后，将会看到三维的效果。默认的透视视角中心在容器

 <section class="container">
        <div id="card">
        </div>
    </section>

.container {
        width: 200px;
        height: 260px;
        position: relative;
        -webkit-perspective: 700px;
        -webkit-transform-style: preserve-3d;
        -moz-perspective: 700px;
        -moz-transform-style: preserve-3d;
    }
    
    #card {
        width: 100%;
        height: 100%;
        position: absolute;
        transform: rotateY(70deg);
        -ms-transform: rotateY(70deg); /* IE 9 */
        -moz-transform: rotateY(70deg);/* Firefox */
        -webkit-transform: rotateY(70deg);/* Safari 和 Chrome */
        -o-transform: rotateY(70deg); /* Opera */
        background-color: red;
    }

2.HSL

css3还支持HSL（色调，饱和度，亮度）的定义方式。既然采用hsl的方式，那就应该有三个参数值：

• hue(色调)：0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其他颜色。
• Saturation（饱和度）：取值为0%到100%之间的值。
• Lightness（亮度）：取值为0%到100%之间的值。

background-color: hsl(0,100%, 50%); 

HSLA就是在HSL的基础上多了个控制alpha透明度的参数，取值在0到1之间，格式如下：

background-color: hsl(0,100%, 50%,0.2);

3. filter(滤镜)

www.runoob.com/cssref/css3…

使用drop-shadow(比如高亮当前点击的图标)

img:focus-within {
      width: 24px;
      height: 26px;
      border-right: 20px solid transparent;
      -webkit-filter: drop-shadow(23px 0 #ccc);
      filter: drop-shadow(23px 0 #ccc);
    }

    .is-active .footerIcon img {
        -webkit-filter: drop-shadow(23px 0 #26528f);
        filter: drop-shadow(23px 0 #26528f);
    }

4.clip-path

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle()。clip-path属性代替了现在已经弃用的剪切 clip属性。

5.sass的特性

• 声明变量
• 变量的调用
• 选择器的嵌套
• 属性嵌套
• 伪类嵌套
• 混合宏(带参数，不带参数，复杂宏)

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}