suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Erfahren Sie, wie Sie einen weichen Effekt erzielen, indem Sie die Kanten eines Blocks mit CSS ändern

<p>Wie ändere ich mein CSS, um einen weichen Unschärfeeffekt an den Rändern der Box zu erzielen? Ich möchte, dass der Hintergrund der Box einen Milchglaseffekt hat und statt scharfer Kanten einen gefiederten Effekt hat, der allmählich in den Hintergrund übergeht, aber ich weiß nicht, wie ich das aktuelle CSS ändern soll. Ich hoffe auf eure Hilfe, danke. </p> <p><br /></p> <pre class="brush:css;toolbar:false;">.wrap { Position: relativ; Breite: 100 %; Höhe: 100 Vh; Hintergrundbild: url('https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=16. 25&q= 80'); Hintergrundgröße: Cover; .Kasten { Position: absolut; links: 50 %; oben: 50 %; transform: Translate(-50%, -50%); Breite: 200px; Höhe: 200px; Hintergrundfarbe: rot; Randradius: 50 %; Hintergrundfarbe: rgba(225, 225, 225, 10 %); Hintergrundfilter: Unschärfe (2px); } }</pre> <pre class="brush:html;toolbar:false;"><div class="wrap"> <div class="box"></div> </div></pre> <p><br /></p>
P粉785522400P粉785522400568 Tage vor861

Antworte allen(1)Ich werde antworten

  • P粉462328904

    P粉4623289042023-08-17 10:35:44

    我所理解的只是在下面添加任何一个代码片段:

    box-shadow: inset 2px 2px 15px #fff; // 或者 box-shadow: inset 2px 2px 15px rgba(255,255,255,.5)

    Antwort
    0
  • StornierenAntwort