Easily master css3 shadow, reflection, and gradient tips-CSS Tutorial-php.cn

Easily master css3 shadow, reflection, and gradient tips

高洛峰

Release： 2017-03-04 10:11:03

Original

1796 people have browsed it

The editor below will bring you a 5-minute article to help you master CSS3 shadows, reflections, and gradient tips (recommended by the editor). The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

Do: Easily master css3 shadow, reflection, and gradient tips

Second, first create two texts and run them without processing as shown Easily master css3 shadow, reflection, and gradient tips

3. Add a shadow to the first p font

text-shadow: 5px 5px 10px red;

text-shadow: 5px 5px 5px red,5px -5px 10px yellow;

box-shadow: Usage and text -shadow is similar, except that it is for the box, such as p

text-shadow:[颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...前两个值可以是负数,第三个不能使负数,可以是0(无效果)

Copy after login

Easily master css3 shadow, reflection, and gradient tips

##4. Add reflection to the first p

-webkit-box-reflect

:below 10px ;

Direction (above, below, left, right) spacing.

Note: Reflection does not occupy the space of the document flow, and the level is higher than the document flow

##The reflection is performed on the label (width and height) Easily master css3 shadow, reflection, and gradient tips

5. Add gradient##background-image

: -webkit- linear-gradient

(left, red 0%, yellow 50% );The first percentage is from 0% to this percentage, all of which are this color, and the last one is The percentage is from this percentage to 100%, all of which are this color. If the percentage is different in the middle, it is a gradient, and if it is the same, it is the dividing line.

Easily master css3 shadow, reflection, and gradient tips

6. All codes:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS3</title>
        <style type="text/css">
            p{    
                font-size: 30px;    
                width: 300px;    
                height: 100px;    
                background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );    
                /*渐变*/    
                color: blue;    
                -webkit-box-reflect:below 10px ;    
                /*倒影*/    
                text-shadow: 5px 5px 10px red;    
                /*阴影*/    
            }    
            span{    
                background: aqua;    
            }    

</style>
    </head>
    <body>
        <p>
            <p>我会翻跟斗！！哈哈哈</p>
        </p>
        <span>
            倒影不能把握的位置给占了！倒影不能把握的位置给占了！    
            倒影不能把握的位置给占了！倒影不能把握的位置给占了！    
        </span>
    </body>
</html>

Copy after login

The above is 5 minutes Let you master CSS3 shadow, reflection, and gradient tips (recommended by the editor). This is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more related articles on how to easily master css3 shadows, reflections, and gradients, please pay attention to the PHP Chinese website!