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

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.

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:

<!--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!