css揭秘

一：渐变

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向       background: linear-gradient(direction, color-stop1, color-stop2, ...);
  • 径向渐变（Radial Gradients）- 由它们的中心定义                         background: radial-gradient(center, shape size, start-color, ..., last-color);   
  • 重复的径向渐变                                                    　　                      background:repeating-radial-gradient(center, shape size, start-color, ..., last-color);                   

补充：

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

size 参数定义了渐变的大小。它可以是以下四个值：

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

 

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}

二：currentcolor（css第一变量）

比图想要hr线的颜色和字体颜色保持一致，可以这样写：

hr{
        height:.5em;
        background: currentcolor;
   }

类似这些border-color    outline-color     text-shadow    box-shadow都可以使用

三：border-radius(/”前面的值设置其水平半径，“/”后面值设置其垂直半径。)

border-radius:30px / 20px 40px;

 四：波点

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .one {
                width: 200px;
                height: 100px;
                background:#655;
                background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);  //如果这里只有一项，没有background-position,效果图第二个图
                background-size: 30px 30px;
                background-position:0 0, 15px 15px;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <div class="one"></div>
        </div>
    </body>

效果图：

五：色轮

.two{
        margin-top: 100px;
        width:200px;
        height: 200px;
        border-radius: 100px;
        background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red);
}

效果图：

 六：文字垂直居中

加载父元素中，

 

display: flex;
flex-direction: column;
justify-content: center;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2018-07-06 18:31  wanan_01  阅读(181)  评论(0)    收藏  举报