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

Home

Web Front-end

CSS Tutorial

Easily master css3 shadow, reflection, and gradient tips

高洛峰

Mar 04, 2017 am 10:11 AM

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(无效果)

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>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Two Images and an API: Everything We Need for Recoloring ProductsApr 15, 2025 am 11:27 AM

I recently found a solution to dynamically update the color of any product image. So with just one of a product, we can colorize it in different ways to show

Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest ConnectionsApr 15, 2025 am 11:19 AM

In this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds

Options for Hosting Your Own Non-JavaScript-Based AnalyticsApr 15, 2025 am 11:09 AM

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used

It's All In the Head: Managing the Document Head of a React Powered Site With React HelmetApr 15, 2025 am 11:01 AM

The document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its

What is super() in JavaScript?Apr 15, 2025 am 10:59 AM

What's happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super. to access its

Comparing the Different Types of Native JavaScript PopupsApr 15, 2025 am 10:48 AM

JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:

Why Are Accessible Websites so Hard to Build?Apr 15, 2025 am 10:45 AM

I was chatting with some front-end folks the other day about why so many companies struggle at making accessible websites. Why are accessible websites so hard