Bild zuschneiden mit abgerundeten Rahmen in CSS

Ist es möglich, die CSS verwenden, um ein Bild zu beschneiden, so dass es hat einen abgerundeten Rand?

Original Bild

Bild zuschneiden mit abgerundeten Rahmen in CSS

Beschnittene Bild

Bild zuschneiden mit abgerundeten Rahmen in CSS

Wie mache ich das in CSS?

InformationsquelleAutor Sidetik | 2013-08-27

  1. 10

    Wie diese:

    CSS:

    img.foo {    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

    HTML:

    <img class="foo" src="./foo.jpg" />

    Sehen http://border-radius.com/ für einen generator.

    Gut, ich habe von Ihnen positiv bewertet werden, sondern nur sicherstellen, dass es img.foo und nicht img .foo Ihre Selektor ist falsch, es sollte kein Raum zwischen den img und .foo

    InformationsquelleAutor Joren

  2. 1

    Fügen Sie ein border-radius border-radius:4px;

    InformationsquelleAutor Josh M

  3. 1

    Zuschneiden, Bild in css, verwenden Sie es als hintergrund.

    Html:

    <div class="cropped-image"></div>

    CSS:

    .cropped-image {
   width: 100px; //crop by width
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   background: url("your image url") no-repeat center; //show image center
}

    ODER verwenden Sie clip - http://www.w3.org/wiki/CSS/Properties/clip

    img{
   clip: rect(0px, 50px, 50px, 0px);
}
    Dies macht keinen Sinn. Warum sollten Sie beschränken Sie die Breite auf 100px? Das ist nicht das, was der OP gefragt. Es gibt auch keine Notwendigkeit, machen es zu einem hintergrund, wie border-radius ist genauso leicht angewendet img Elemente. Und es gibt keine solche Sache wie -msie-border-radius.
    Leider, clip ist jetzt veraltet.

    InformationsquelleAutor maximkou

  4. 0

    Verwendet, um dieses

    -webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
    Es gab nie eine -o-border-radius. Nicht nur anfügen, diese Präfixe, um jede Eigenschaft, die Sie an denken können.

    InformationsquelleAutor Rohit Azad

  5. 0

    Durch Ernte, wenn Sie wollen, machen Sie es wie das Bild, das Sie haben ich.e http://i.imgur.com/AJdVpn7.png, können Sie dies auf zwei weisen tun.

    1. Fügen Sie ein border-radius von CSS
    2. Crop das Bild, um die Grenzen Rundheit in Ihrem Bildbearbeitungsprogramm und speichern Sie es als gif-oder png-Transparenz.

    InformationsquelleAutor Nitesh

Schreibe einen Kommentar