Tworzenie zaokrąglonych narożników za pomocą CSS [closed]

Przyjrzałem się tak wcześnie w tworzeniu przepełnienia stosu i nie mogłem znaleźć żadnej metody tworzenia zaokrąglonych rogów, które nie pozostawiły mi poczucia, jakbym właśnie szedł przez kanał.

CSS3 ostatecznie definiuje

border-radius:

Ogólnie dostaję zaokrąglone rogi tylko za pomocą css, jeśli przeglądarka nie obsługuje, widzą zawartość z płaskimi narożnikami. Jeśli zaokrąglone rogi nie są tak ważne dla Twojej witryny, możesz użyć poniższych linii.

Jeśli chcesz użyć wszystkich rogów o tym samym promieniu, jest to prosty sposób:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

Ale jeśli chcesz kontrolować każdy zakątek to dobrze:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Jak widać w każdym zestawie masz style specyficzne dla przeglądarki i na czwartym wierszu deklarujemy w standardowy sposób przez to we Załóżmy, że w przyszłości inni (miejmy nadzieję, że IE też) zdecydują się zaimplementować tę funkcję, aby nasz styl był dla nich gotowy.

Jak powiedziano w innych odpowiedziach, działa to pięknie na Firefoksie, Safari, Camino, Chrome.

Jeśli jesteś zainteresowany tworzeniem narożników w IE to może się przydać - http://css3pie.com/

Polecam używanie obrazów tła. Inne sposoby nie są tak dobre: brak antyaliasingu i bezsensownych znaczników. To nie jest miejsce na używanie JavaScript.

Jak powiedział Brajeshwar: używając selektora border-radius css3. Do tej pory możesz zastosować -moz-border-radius i -webkit-border-radius odpowiednio dla przeglądarek Mozilla i Webkit.

Tutaj: plik zachowania .htc do pobrania round-corners z wartości border-radius w Twoim CSS. Na przykład.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

Oczywiście selektor zachowań nie jest prawidłowym selektorem, ale można go umieścić na inny plik css z komentarzami warunkowymi (tylko dla IE).

Zachowanie pliku HTC

Z obsługą CSS3 zaimplementowaną w nowszych wersjach Firefoksa, Safari i Chrome, pomocne będzie również spojrzenie na"Border Radius".

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

Jak każdy inny skrót CSS, powyższy może być również napisany w rozszerzonym formacie, a tym samym osiągnąć inny promień Krawędzi dla topleft, topright, itp.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

JQuery to sposób, w jaki sobie z tym poradzę. obsługa css jest minimalna, obrazy są zbyt skrzypiące, aby móc wybrać elementy, które chcesz mieć zaokrąglone rogi w jQuery ma dla mnie sens, chociaż niektórzy bez wątpienia twierdzą inaczej. Jest wtyczka, której ostatnio użyłem do projektu w pracy Tutaj: http://plugins.jquery.com/project/jquery-roundcorners-canvas

Zawsze jest sposób JavaScript (zobacz inne odpowiedzi), ale ponieważ jest to czysto stylizacja, jestem trochę przeciwko użyciu skryptów klienckich, aby to osiągnąć.

Sposób, w jaki preferuję (choć ma swoje ograniczenia), to użycie 4 zaokrąglonych narożników obrazów, które umieścisz w 4 narożnikach swojego pudełka za pomocą CSS:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

Jak wspomniano, ma swoje granice (tło za zaokrąglonym pudełkiem powinno być gładkie, inaczej rogi nie będą pasować do tła), ale działa bardzo dobrze za cokolwiek innego.

Zaktualizowano: Poprawiono implantację za pomocą arkusza sprite.

Osobiście najbardziej podoba mi się to rozwiązanie, jego an.htc, aby umożliwić IE renderowanie zakrzywionych obramowań.

Http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

W Safari, Chrome, Firefox > 2, IE > 8 i Konquerer (i prawdopodobnie innych) można to zrobić w CSS za pomocą właściwości border-radius. Ponieważ nie jest to jeszcze oficjalnie część specyfikacji, Użyj prefiksu określonego przez dostawcę...

Przykład

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Rozwiązania JavaScript zazwyczaj dodają stertę małych divs, aby wyglądały na zaokrąglone, lub używają obramowań i ujemnych marginesów, aby zrobić 1px karbowane narożniki. Niektóre mogą również korzystać z SVG w IE.

IMO, sposób CSS jest lepszy, ponieważ jest łatwy, I ulegnie degradacji w przeglądarkach, które jej nie obsługują. Jest to oczywiście tylko przypadek, gdy klient nie wymusza ich w nieobsługiwanych przeglądarkach, takich jak IE

Oto rozwiązanie HTML / js / css, które zrobiłem niedawno. Jest błąd zaokrąglania 1px z absolutnym pozycjonowaniem w IE, więc chcesz, aby kontener był parzystą liczbą pikseli, ale jest całkiem czysty.

HTML:

<div class="s">Content</div>

JQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

Obraz ma tylko 18px szerokości i ma wszystkie 4 rogi spakowane razem. Wygląda jak koło.

Uwaga: nie potrzebujesz drugiej wewnętrznej owijki, ale lubię używać marginesu na wewnętrznej owijce, aby marginesy na akapity i nagłówki nadal utrzymują załamanie marginesu. Możesz również pominąć jquery i po prostu umieścić wewnętrzną owijkę w html.

Jako wskazanie, jak skomplikowane jest uzyskanie zaokrąglonych rogów, nawet Yahoo je zniechęca (patrz punkt pierwszy)! Przyznam, że w tym artykule mówią tylko o zaokrąglonych rogach 1 piksela, ale interesujące jest to, że nawet firma z ich doświadczeniem stwierdziła, że są zbyt bolesne, aby zmusić ich do pracy przez większość czasu.

Jeśli twój projekt może przetrwać bez nich, to najprostsze rozwiązanie.

Jasne, jeśli jest to Stała szerokość, to jest super łatwe korzystanie z CSS, i wcale nie obraźliwe lub pracochłonne. Kiedy trzeba go skalować w obu kierunkach, rzeczy się trzęsą. Niektóre rozwiązania mają oszałamiającą ilość div ułożonych jeden na drugim, aby tak się stało.

Moim rozwiązaniem jest nakazanie projektantowi, że jeśli chce używać zaokrąglonych rogów (na razie), musi to być Stała szerokość. Projektanci uwielbiają zaokrąglone rogi( ja też), więc uważam, że jest to rozsądny kompromis.

Ruzee Borders jest jedynym rozwiązaniem opartym na Javascript, które działa we wszystkich głównych przeglądarkach (Firefox 2/3, Chrome, Safari 3, IE6/7/8), a także jedynym, które działa, gdy zarówno zaokrąglony element, jak i element nadrzędny zawierają obraz tła. Ma również granice, cienie i świecenie.

Nowszy RUZEE.ShadedBorder jest inną opcją, ale brakuje w niej wsparcia dla uzyskiwania informacji o stylach z CSS.

Jeśli chcesz skorzystać z rozwiązania border-radius, istnieje ta niesamowita strona do generowania css, który sprawi, że będzie działać dla safari/chrome/FF.

W każdym razie, myślę, że twój projekt nie powinien zależeć od zaokrąglonego rogu, a jeśli spojrzysz na Twittera, to po prostu mówią K * * * do użytkowników IE i opery. Zaokrąglone rogi to miło mieć, a ja osobiście jestem ok trzymając to dla fajnych użytkowników, którzy nie używają IE :).

Teraz oczywiście nie jest to opinia klientów. Oto link : http://border-radius.com/

Aby dodać rozwiązania htc wymienione powyżej, oto kolejne rozwiązania i przykłady do osiągnięcia zaokrąglone rogi w IE .

Nie ma "najlepszego" sposobu; są sposoby, które działają dla Ciebie i sposoby, które nie. Powiedziawszy to, zamieściłem tutaj artykuł o tworzeniu CSS + Image based, fluid round corner technique:

Ramka z okrągłymi rogami przy użyciu CSS i obrazów-część 2

Przegląd tej sztuczki polega na tym, że używa zagnieżdżonych Div I powtarzania i pozycjonowania obrazu w tle. Dla układów o stałej szerokości (Stała szerokość rozciągliwa wysokość), będziesz potrzebował trzech Div I trzech obrazów. Do płynu układ szerokości (rozciągliwa szerokość i wysokość) potrzebujesz dziewięciu Div I dziewięciu obrazów. Niektórzy mogą uznać to za zbyt skomplikowane, ale IMHO jest to najładniejsze rozwiązanie w historii. Żadnych hacków, żadnego JavaScript.

Napisałem artykuł na blogu na ten temat jakiś czas temu, więc po więcej informacji, zobacz tutaj

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

Również, gdy CSS3 będzie szeroko obsługiwany z border-radius, będzie to oficjalny najlepszy sposób na robienie zaokrąglonych rogów.

Nie używaj CSS, jQuery było wspominane kilka razy. Jeśli potrzebujesz pełnej kontroli nad tłem i obramowaniem swoich elementów, wypróbuj wtyczkę jQuery Background Canvas . Umieszcza element Canvas HTML5 w tle i pozwala na narysowanie każdego tła lub obramowania, które chcesz. Zaokrąglone rogi, gradienty i tak dalej.

Opera nie obsługuje jeszcze border-radius (najwyraźniej będzie w wydaniu po wersji 10). W międzyczasie możesz użyć CSS, aby ustawić tło SVG, aby stworzyć podobny efekt .