Abgerundete Ecken nur an einigen Ecken in css

Ist es möglich, eine abgerundete Ecke mit CSS zu erstellen, wo ich nur an einer bestimmten Ecke und nicht an allen Ecken gerundet werde? Zur Zeit benutze ich:Abgerundete Ecken nur an einigen Ecken in css

-webkit-border-radius: 7px; 
    -moz-border-radius: 7px; 
    border-radius: 7px;

Aber ich sehe keine Möglichkeit, die obere linke oder eine andere Ecke zu spezifizieren. Ich möchte, dass die anderen Ecken quadratisch bleiben.

Quelle

2013-08-15 AndroidDev

probieren Sie es aus wie diese, 'border-radius bleiben: 4px 0px 0px 0px;' Demo: http://jsbin.com/acumag/1/edit –

Duplizieren von http://stackoverflow.com/questions/16036486/how-to-set-border-radius-of-some-corner-only-with-css –

Sie können es wie

border-radius: 5px 10px 15px 20px; /* This is a short hand syntax */

Die obige Syntax wie ein Ventilator arbeitet, ausgehend von 5px und endet am 20px, nur ein Diagramm unten hinzugefügt, der Pfeil dort zeigt den Beginn der Stenografie Syntax Fluss .

enter image description here

Demo

Um einen bestimmten Radius angeben, können Sie Eigenschaft wie

border-top-left-radius: 10px;

verwenden, die

entspricht

border-radius: 10px 0 0 0;

Quelle

2013-08-15 05:43:19

Sie verwenden können: DEMO

border-radius-links oben
border-radius-top-right
border-radius-unten links
border-radius-unten-rechts
```
border-radius: 5px 0 10px 0; 
```

Weitere Informationen finden Sie unter this Website.

Quelle

2013-08-15 05:44:38 Brian

Versuchen Sie, diese mit: -

border-radius: <specific_value>px <specific_value>px <specific_value>px <specific_value>px

diese vier Werte repräsentieren die verschiedenen Ecken in einer im Uhrzeigersinn Weise.

Quelle

2013-08-15 05:45:10

.rounded-corners { 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px;\ 
    border-radius: 20px; 
}

Änderungen können wie folgt vorgenommen werden,

-webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    -webkit-border-bottom-left-radius: 0px; 
    -webkit-border-bottom-right-radius: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    -moz-border-radius-bottomright: 0px; 
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px;

Quelle

2013-08-15 05:54:49

Es ist sehr einfach, einen abgerundeten Rand zu schaffen, indem eine bestimmte Ecke festgelegt wird: -

Wenn u die linke obere Ecke abgerundet erstellen möchten und alle anderen Ecken gerade, dann verwenden Sie diesen Code anstelle von "Border-Radius" und geben Sie Ihren gewünschten Wert in Pixel

border-top-left-radius: 10px; 
-moz-border-top-left-radius: 10px; 
-webkit-border-top-left-radius: 10px;

können Sie dies auch anders machen: -

border-radius: 10px 0px 0px 0px;

wobei der erste für die obere linke Ecke (10px), der zweite für die obere rechte Ecke (0px), der dritte für die untere rechte Ecke (0px) und der vierte für die untere linke Ecke (0px).

von diesem, nur linke obere Ecke wird abgerundet gemacht werden und alle anderen Ecken werden die gleichen

Quelle

2013-08-15 06:47:45 Hussain

Abgerundete Ecken nur an einigen Ecken in css

Antwort

Verwandte Themen