Tworzenie zaokrąglonych narożników za pomocą CSS [zamknięte]

Jak mogę tworzyć zaokrąglone rogi za pomocą CSS?

Od czasu wprowadzenia CSS3 najlepszym sposobem dodawania zaokrąglonych rogów za pomocą CSS jest użycie border-radiuswłaściwości. Możesz przeczytać specyfikację właściwości lub uzyskać przydatne informacje dotyczące implementacji w MDN :

Jeśli używasz przeglądarki, która się nie implementuje border-radius (Chrome przed wersją 4, Firefox przed wersją 4, IE8, Opera przed wersją 10.5, Safari przed wersją 5), poniższe linki opisują całą masę różnych podejść. Znajdź taki, który pasuje do Twojej witryny i stylu kodowania i idź z nim.

1. Projektowanie CSS: Tworzenie niestandardowych narożników i granic
2. Zaokrąglenie narożników CSS
3. 25 technik zaokrąglonych narożników za pomocą CSS

Patrzyłem na to na wczesnym etapie tworzenia przepełnienie stosu i nie mógł znaleźć dowolny metody tworzenia zaokrąglonych rogów, która nie sprawiłaby, że poczułem się, jakbym właśnie przeszedł przez kanał.

CSS3 czy wreszcie zdefiniować

border-radius:

Właśnie tak chcesz, żeby działało. Chociaż działa to OK w najnowszych wersjach Safari i Firefox, ale wcale nie w IE7 (i nie sądzę w IE8) lub Opera.

W międzyczasie hacki sięgają końca. Chciałbym usłyszeć, co inni ludzie uważają za najczystszy sposób na zrobienie tego w IE7, FF2 / 3, Safari3 i Opera 9.5.

Zazwyczaj zaokrąglam 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ć tych linii poniżej.

Jeśli chcesz używać wszystkich narożnikó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 zakręt, 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, aw czwartym rzędzie deklarujemy w ten sposób w standardowy sposób, zakładamy, że w przyszłości inni (miejmy nadzieję, że również IE) zdecydują się zaimplementować tę funkcję, aby nasz styl był również na nie gotowy.

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

Jeśli chcesz tworzyć narożniki w IE, może to być przydatne - http://css3pie.com/

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

Jak powiedział Brajeshwar: Korzystanie z border-radiusselektora css3 . Do tej pory możesz złożyć wniosek -moz-border-radiusi-webkit-border-radius dla przeglądarek opartych na Mozilli i Webkit.

Co się dzieje z Internet Explorerem ?. Microsoft ma wiele zachowań, aby Internet Explorer miał dodatkowe funkcje i zdobył więcej umiejętności.

Tutaj: .htcplik zachowania, który można uzyskać round-cornersz border-radiuswartości w swoim CSS. Na przykład.

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

Oczywiście selektor zachowania nie jest prawidłowym selektorem, ale można go umieścić w innym pliku css z komentarzami warunkowymi (tylko dla IE).

Plik zachowanie HTC

Dzięki obsłudze CSS3 wdrażanej w nowszych wersjach przeglądarek Firefox, 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ższe można również zapisać w rozszerzonym formacie, a tym samym osiągnąć inny promień obramowania dla lewej i prawej strony 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 radziłbym sobie z tym osobiście. Wsparcie css jest minimalne, obrazy są zbyt skomplikowane, aby móc wybrać elementy, które chcesz mieć zaokrąglone rogi w jQuery ma dla mnie idealny sens, chociaż niektórzy bez wątpienia twierdzą inaczej. Jest tu wtyczka, której ostatnio użyłem w projekcie w pracy: http://plugins.jquery.com/project/jquery-roundcorners-canvas

Zawsze jest sposób na JavaScript (zobacz inne odpowiedzi), ale ponieważ jest to wyłącznie stylizacja, jestem trochę przeciwny używaniu skryptów klienta, aby to osiągnąć.

Preferuję (choć ma swoje ograniczenia) użycie 4 zaokrąglonych rogów, które umieścisz w 4 rogach 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 ograniczenia (tło za zaokrąglonym polem powinno być gładkie, w przeciwnym razie narożniki nie pasują do tła), ale działa bardzo dobrze na cokolwiek innego.

Zaktualizowano: Poprawiono implantację za pomocą arkusza duszka.

Osobiście podoba mi się to rozwiązanie, jego .htc pozwala IE renderować zakrzywione granice.

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

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

Przykład

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

Rozwiązania JavaScript na ogół dodają mnóstwo małych div liter, aby wyglądały na zaokrąglone, lub używają ramek i marginesów ujemnych, aby uzyskać ścięte rogi 1px. Niektórzy mogą również wykorzystywać SVG w IE.

IMO, sposób CSS jest lepszy, ponieważ jest łatwy i ulegnie wdzięcznej degradacji w przeglądarkach, które go nie obsługują. Jest to oczywiście tylko przypadek, w którym klient nie wymusza ich w nieobsługiwanych przeglądarkach, takich jak IE <9.

Oto rozwiązanie HTML / js / css, które ostatnio zrobiłem. Występuje błąd zaokrąglania 1px z absolutnym pozycjonowaniem w IE, więc chcesz, aby pojemnik miał 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 18 pikseli szerokości i zawiera wszystkie 4 rogi razem. Wygląda jak koło.

Uwaga: nie potrzebujesz drugiego wewnętrznego opakowania, ale lubię używać marginesu na wewnętrznym opakowaniu, aby marginesy akapitów i nagłówków nadal zachowywały zwinięcie marginesu. Możesz także pominąć jquery i po prostu umieścić wewnętrzne opakowanie w HTML.

Aby pokazać, jak skomplikowane jest zaokrąglanie rogów, nawet Yahoo ich zniechęca (patrz pierwszy punkt)! To prawda, że ​​w tym artykule mówią tylko o zaokrąglonych rogach o 1 piksel, ale interesujące jest to, że nawet firma z ich doświadczeniem stwierdziła, że ​​jest to zbyt wielki ból, aby zmusić ich do działania większość czasu.

Jeśli Twój projekt przetrwa bez nich, jest to najłatwiejsze rozwiązanie.

Jasne, jeśli jest to stała szerokość, bardzo łatwo jest używać CSS i wcale nie jest obraźliwa ani pracochłonna. Kiedy trzeba go skalować w obu kierunkach, rzeczy stają się niestabilne. Niektóre rozwiązania mają oszałamiającą ilość div ustawionych jeden na drugim, aby tak się stało.

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

Ruzee Borders to jedyne rozwiązanie antyaliasowania zaokrąglonych rogów oparte na JavaScript, które znalazłem, które działa we wszystkich głównych przeglądarkach (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8), a także jedyne, które działa, gdy zarówno zaokrąglony element ORAZ element nadrzędny zawierają obraz tła. Robi także granice, cienie i promienie.

Nowsza wersja RUZEE.ShadedBorder to kolejna opcja, ale nie obsługuje ona uzyskiwania informacji o stylu z CSS.

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

W każdym razie uważam, że twój projekt nie powinien zależeć od zaokrąglonego rogu, a jeśli spojrzysz na Twittera, mówią po prostu F **** użytkownikom IE i użytkownikom opery. Zaokrąglone rogi są fajne i osobiście jestem w porządku, zachowują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/

Oprócz wspomnianych wyżej rozwiązań HTC, oto inne rozwiązania i przykłady, jak dotrzeć do zaokrąglonych rogów w IE .

Nie ma „najlepszej” drogi; istnieją sposoby, które działają dla ciebie i sposoby, które nie działają. Powiedziawszy to, opublikowałem tutaj artykuł o tworzeniu opartej na CSS + Image, płynnej technice okrągłego narożnika:

Pudełko z zaokrąglonymi narożnikami za pomocą CSS i obrazów - część 2

Przegląd tej sztuczki polega na tym, że wykorzystuje ona zagnieżdżone DIV oraz powtarzanie i pozycjonowanie obrazu tła. W przypadku układów o stałej szerokości (stała szerokość o szerokości rozciągliwej) potrzebne będą trzy DIV i trzy obrazy. Aby uzyskać płynny układ szerokości (rozciągliwa szerokość i wysokość), potrzebujesz dziewięciu DIV i dziewięciu zdjęć. Niektórzy mogą uznać to za zbyt skomplikowane, ale IMHO jest najmilszym rozwiązaniem w historii. Bez włamań, bez JavaScript.

Jakiś czas temu napisałem na ten temat artykuł na blogu, aby uzyskać 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>

Działa całkiem dobrze. Nie wymaga Javascript, tylko CSS i HTML. Z minimalnym zakłóceniem HTML innych elementów. Jest bardzo podobny do tego, co opublikował Mono, ale nie zawiera żadnych specyficznych dla IE 6 hacków, a po sprawdzeniu wydaje się, że w ogóle nie działa. Kolejną sztuczką jest uczynienie wewnętrznej części każdego obrazu narożnego przezroczystym, aby nie blokował tekstu znajdującego się w pobliżu rogu. Zewnętrzna część nie może być przezroczysta, aby mogła zakrywać granicę nie zaokrąglonego elementu div.

Ponadto, gdy CSS3 będzie szeroko obsługiwany z promieniem granicy, będzie to oficjalny najlepszy sposób wykonywania zaokrąglonych rogów.

Nie używaj CSS, jQuery został wspomniany kilka razy. Jeśli potrzebujesz pełnej kontroli tła i obramowania swoich elementów, wypróbuj wtyczkę Canvas Background jQuery . Umieszcza element Canvas HTML5 w tle i pozwala narysować każde tło lub obramowanie, które chcesz. Zaokrąglone rogi, gradienty i tak dalej.

Opera nie obsługuje jeszcze promienia obramowania (podobno będzie w wersji po wersji 10). W międzyczasie możesz użyć CSS, aby ustawić tło SVG, aby uzyskać podobny efekt .