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


253

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


Oto dobry film o tym, jak robić zaokrąglone rogi przy użyciu tylko CSS: < sampsonvideos.com/video.php?video=12 >
Stan


3
Ponad 200 polubień mówi, że to konstruktywne.
SteveCav

1
Uważam, że jest to cenne pytanie kanoniczne, które zasługuje na ponowne otwarcie, zwłaszcza że jest to teraz wiki społeczności.
DavidRR

Tyle, że są to informacje, które można znaleźć w wielu miejscach w Internecie. Nie ma potrzeby, aby SO kopiowało istniejące zasoby.
Jim Garrison

Odpowiedzi:


102

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

1
uważam, że DD_roundies to idealne rozwiązanie: dillerdesign.com/experiment/DD_roundies/#nogo
vsync

1
@vsync, ale nie jest dobrze obsługiwane w IE8 dillerdesign.com/experiment/DD_roundies/#supported_browsers
Vyas

5
przydatny link, jeśli zdecydujesz się na CSS3 (np. SO) border-radius.com (inny ref. css3.info/border-radius-apple-vs-mozilla )
mickthompson


80

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.


5
„... przeszedłeś kanał ściekowy?” To trochę trudne, Jeff. Odpowiedź brzmi: „To zależy”. Pojedyncze pola koloru, gradientu lub cienia? Czy muszą się rozwijać w pionie, w poziomie, czy w obu przypadkach? Różne rozwiązania dla różnych wymagań. Im bardziej wymóg, tym bardziej podobne do kanalizacji rozwiązanie.
Carl Camera,

28
Wolałbym użyć tej metody. Jeśli to nie obsługuje przeglądarki, kogo to obchodzi?
Sam Murray-Sutton,

11
Twitter obniża funkcję zaokrąglonego rogu do wskazanych narożników na swojej stronie internetowej dla użytkowników IE. Tak naprawdę to nic wielkiego.
Lance Fisher,

5
Zdecydowanie skorzystałbym z tego podejścia - zajmiemy się takimi, jakie są. Jeśli ktoś nie korzysta z przeglądarki (tj. IE), zasługuje na to, aby zaokrąglone rogi były kątowe. :)
thSoft

1
Chcę przegłosować tę odpowiedź, ponieważ nie opisuje ona tego, co według osoby odpowiadającej (Jeff) jest najlepszym sposobem.
allyourcode

27

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.



13

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.


1
javascript ma zdecydowanie najwyższy zasięg niepowodzenia i migotania w moim doświadczeniu. wszystkie wtyczki jquery, których wypróbowałem, mają nieoczekiwane skutki uboczne
Simon_Weaver

CurvyCorners ( curvycorners.net ) i ShadedBorder ( ruzee.com/blog/shadedborder ) nie udaje się obsługuje antyaliasingu. Istnieją również sposoby wykorzystania tych dodatkowych znaczników, które można zaimplementować za pomocą klasy, a następnie znaczniki są dodawane dynamicznie do elementów klasyfikowanych. To powiedziawszy, im więcej ich używam, tym bardziej wydajesz się mieć rację ... są przydatne do prototypowania, ale dodają dużo dodatkowej wagi do DOM. Teraz, kiedy dostosowałem mój tak, jak chcę, planuję przekonwertować je na obrazy.
Ben Regenspan,

1
Ta odpowiedź nie zawiera prawie wystarczających szczegółów, aby ktoś mógł wdrożyć to, co myśli odpowiadający.
allyourcode

11

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


4
nigdy nie zrozumiałem, dlaczego tak wielu zajmuje się walidacją CSS. to nie ma znaczenia, liczy się tylko walidacja DOM.
vsync

To wygląda jak droga.
Matthew Olenik

3
Czy możesz dodać krótkie wyjaśnienie, czym jest plik zachowania? Myślę, że osoba szukająca odpowiedzi na to pytanie prawdopodobnie nie będzie z nimi zaznajomiona.
allyourcode

2
Wygląda na to, że link do pliku zachowania jest martwy
evanmcd

9

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;

1
Twoja składnia dla -webkit-border-bottom-rightright-radius: 3px; i -webkit-border-top-right-radius: 10px; należy odczytać -webkit-border-bottom-right-radius: 3px i -webkit-border-top-right-radius: 10px;
Wolfr

8

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


@mcaulay - Czy obsługuje także nadawanie pudłu cienia?
nickytonline,

jquery roundcorners nie obsługuje IE 8.
evanmcd

6

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.


Można to wszystko uprościć za pomocą ikonek CSS, może zaktualizuję moją odpowiedź.
mbillard,

Tam zaktualizowałem kod, aby użyć arkusza sprite.
mbillard


5

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.


5

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.


3

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.


Chcę znaleźć tę część strony YUI, o której mówisz, ale żaden punkt, na który patrzyłem, nie powiedziałby, że próba zaokrąglenia narożników nie jest złym pomysłem. Czy mógłbyś to sprecyzować? Znalazłem jedną część, która omawia dyskusje na temat tego, jak inaczej ustawiać szerokości przy użyciu zaokrąglonych narożników, ale nie zniechęca.
allyourcode

@allyourcode - już go nie widzę. pamiętam, że napisałem ten post, ale nie do końca to, co powiedzieli. wygląda jednak na to, że w drugim linku powyżej wspomniano o usunięciu obsługi IE dla zaokrąglonych rogów 1px. ale w każdym razie ten post był trochę język w policzek, ponieważ mówią tylko o rogach 1px, co moim zdaniem jest ogromną stratą czasu! pamiętam, kiedy pisałem o tym, że byłem ogólnie sfrustrowany zaokrąglonymi narożnikami i osiadłem na obrazach narożnych
Simon_Weaver

2

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.


2

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.


1

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/



1

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.


0

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.


0

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.


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.