Heim  >  Artikel  >  Web-Frontend  >  So erzielen Sie einen Schatteneffekt in CSS

So erzielen Sie einen Schatteneffekt in CSS

青灯夜游
青灯夜游Original
2021-04-29 17:46:3426389Durchsuche

So erzielen Sie einen Schatteneffekt in CSS: 1. Verwenden Sie das Attribut „text-shadow“, um schattierten Text festzulegen, um einen Textschatteneffekt zu erzielen. 2. Verwenden Sie das Attribut „box-shadow“, um Schatten auf das Textfeld anzuwenden, um einen Randschatteneffekt zu erzielen.

So erzielen Sie einen Schatteneffekt in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Methode 1: Verwenden Sie das Textschatten-Attribut, um einen Textschatteneffekt zu erzielen.

Das Textschatten-Attribut wird verwendet, um den Text mit Schatten zu versehen. Sie können auch die Pixellänge, die Breite und den Unschärfeabstand des Schattens festlegen als die Farbe des Schattens.

Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影!</h1>
    </body> 
</html>

So erzielen Sie einen Schatteneffekt in CSS

Methode 2: Verwenden Sie das Box-Shadow-Attribut, um den Randschatteneffekt zu erzielen

Das Box-Shadow-Attribut kann einen Schatten auf das Textfeld anwenden und die Pixellänge festlegen. Breite und Unschärfe des mittleren Schattenabstands sowie die Farbe des Schattens.

Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置边框阴影效果</title> 
        <style> 
             div{
                width:300px;
                height:100px;
                background-color:red;
                box-shadow: 10px 10px 5px #888888;
            }
        </style> 
    </head> 
    <body> 
        <div>边框阴影!</div> 
    </body> 
</html>

Rendering:

So erzielen Sie einen Schatteneffekt in CSS

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Schatteneffekt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn