Heim >Web-Frontend >CSS-Tutorial >So legen Sie den Schatten für die Schaltfläche in CSS fest

So legen Sie den Schatten für die Schaltfläche in CSS fest

藏色散人
藏色散人Original
2021-03-22 16:41:324851Durchsuche

So legen Sie mit CSS einen Schatten für eine Schaltfläche fest: Erstellen Sie zunächst eine HTML-Beispieldatei. Fügen Sie dann der Schaltfläche Attribute wie „Box-Shadow“ hinzu.

So legen Sie den Schatten für die Schaltfläche in CSS fest

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer

css3 zum Erstellen einer Schaltfläche mit einem Schatten

Effektvergleich vor und nach dem Wischen mit der Maus:

So legen Sie den Schatten für die Schaltfläche in CSS fest

<!--html代码-->
<input class="but" type = "button" value = "确认" />
<!--css代码-->
<style type="text/css">
 .but{
 border: 0px groove orange;
 box-shadow: 5px 6px 10px #000;
 margin-left: 160px;
 border-radius: 10px;
 background: #034c92;
 color: white;
 width: 250px;
 height: 40px;
 font-size: 20px;
 }
 .but:hover{
 box-shadow: 8px 10px 10px #000;
 background: #005DF9;
 }
 </style>

【Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie den Schatten für die Schaltfläche in CSS fest. 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