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

Show Search Button when Search Field is Non-EmptyApr 15, 2025 am 10:00 AM

I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input () when that placeholder is present.

The Trick to Animating the Dot on the Letter 'i'Apr 15, 2025 am 09:55 AM

Here’s the trick: by combining the Turkish letter "ı" and the period "." we can create something that looks like the letter "i," but is made from two separate

Weekly Platform News: WebAPK Limited to Chrome, Discernible Focus Rectangles, Modal Window APIApr 15, 2025 am 09:53 AM

In this week's roundup: "Add to home screen" has different meanings in Android, Chrome and Edge add some pop to focus rectangles on form inputs, and how

Making a Chart? Try Using Mobx State Tree to Power the DataApr 15, 2025 am 09:49 AM

Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and

Blocking Third-Party Hands from the Cookie JarApr 15, 2025 am 09:48 AM

Third-party cookies are set on your computer from domains other than the one that you're actually on right now. For example, if I log into css-tricks.com,

Ten-Ton WidgetsApr 15, 2025 am 09:43 AM

At a recent conference talk (sorry, I forget which one), there was a quick example of poor web performance in the form of a third-party widget. The example

Recipes for Performance Testing Single Page Applications in WebPageTestApr 15, 2025 am 09:42 AM

WebPageTest is an online tool and an Open Source project to help developers audit the performance of their websites. As a Web Performance Evangelist at

Stop Animations During Window ResizingApr 15, 2025 am 09:40 AM

Say you have page that has a bunch of transitions and animations on all sorts of elements. Some of them get triggered when the window is resized because they

See all articles