Membuat sudut bundar menggunakan CSS [ditutup]

Bagaimana saya bisa membuat sudut bulat menggunakan CSS?

Sejak CSS3 diperkenalkan, cara terbaik untuk menambahkan sudut bulat menggunakan CSS adalah dengan menggunakan border-radiusproperti. Anda dapat membaca spesifikasi di properti, atau mendapatkan beberapa informasi implementasi yang berguna di MDN :

Jika Anda menggunakan browser yang tidak mengimplementasikan border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), maka tautan di bawah ini merinci berbagai pendekatan yang berbeda. Temukan yang sesuai dengan situs Anda dan gaya pengkodean, dan ikutilah.

1. Desain CSS: Membuat Sudut & Batas Kustom
2. CSS Rounded Corners 'Roundup'
3. 25 Teknik Sudut Bulat dengan CSS

Saya melihat ini pada awal penciptaan Stack Overflow dan tidak bisa menemukan apa pun metode menciptakan sudut bulat yang tidak meninggalkan saya merasa seperti aku hanya berjalan melalui saluran pembuangan.

CSS3 tidak akhirnya menentukan para

border-radius:

Itulah tepatnya yang Anda inginkan agar berfungsi. Meskipun ini berfungsi baik di versi terbaru Safari dan Firefox, tetapi tidak sama sekali di IE7 (dan saya tidak berpikir di IE8) atau Opera.

Sementara itu, peretasan menurun. Saya tertarik mendengar apa yang dipikirkan orang lain sebagai cara terbersih untuk melakukan ini di IE7, FF2 / 3, Safari3, dan Opera 9.5 saat ini ..

Saya biasanya mendapatkan sudut membulat hanya dengan css, jika browser tidak mendukung mereka melihat konten dengan sudut datar. Jika sudut bulat tidak terlalu penting untuk situs Anda, Anda dapat menggunakan garis-garis di bawah ini.

Jika Anda ingin menggunakan semua sudut dengan jari-jari yang sama ini cara mudah:

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

tetapi jika Anda ingin mengontrol setiap sudut ini bagus:

.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;
}

Seperti yang Anda lihat di setiap set Anda memiliki gaya khusus browser dan pada baris keempat kami menyatakan dengan cara standar dengan ini kami menganggap jika di masa depan yang lain (semoga IE juga) memutuskan untuk mengimplementasikan fitur agar gaya kami siap untuk mereka juga.

Seperti yang diceritakan dalam jawaban lain, ini berfungsi dengan baik di Firefox, Safari, Camino, Chrome.

Jika Anda tertarik untuk membuat sudut di IE maka ini mungkin berguna - http://css3pie.com/

Saya akan merekomendasikan menggunakan gambar latar belakang. Cara lain tidak hampir sama baiknya: Tidak ada markup anti-aliasing dan tidak masuk akal. Ini bukan tempat untuk menggunakan JavaScript.

Seperti kata Brajeshwar: Menggunakan border-radiuspemilih CSS3. Sekarang, Anda dapat menerapkan -moz-border-radiusdan -webkit-border-radiusuntuk masing-masing browser berbasis Mozilla dan Webkit.

Jadi, apa yang terjadi dengan Internet Explorer? Microsoft memiliki banyak perilaku untuk membuat Internet Explorer memiliki beberapa fitur tambahan dan mendapatkan lebih banyak keterampilan.

Di sini: .htcfile perilaku yang didapat round-cornersdari border-radiusnilai di CSS Anda. Sebagai contoh.

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

Tentu saja, pemilih perilaku bukan pemilih yang valid, tetapi Anda dapat meletakkannya di file css yang berbeda dengan komentar bersyarat (hanya untuk IE).

The perilaku HTC File

Dengan dukungan untuk CSS3 yang diterapkan di versi Firefox, Safari dan Chrome yang lebih baru, juga akan membantu untuk melihat "Border Radius".

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

Seperti steno CSS lainnya, di atas juga dapat ditulis dalam format yang diperluas, dan dengan demikian mencapai Radius Perbatasan yang berbeda untuk topleft, topright, dll.

-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 adalah cara saya menangani hal ini secara pribadi. dukungan css minimal, gambar terlalu fiddly, untuk dapat memilih elemen yang ingin Anda miliki di sudut bulat di jQuery masuk akal bagi saya meskipun beberapa tidak diragukan lagi akan membantah sebaliknya. Ada plugin yang baru-baru ini saya gunakan untuk proyek yang sedang bekerja di sini: http://plugins.jquery.com/project/jquery-roundcorners-canvas

Selalu ada cara JavaScript (lihat jawaban lain) tetapi karena ini murni gaya, saya agak menentang penggunaan skrip klien untuk mencapai ini.

Cara yang saya sukai (meskipun memiliki batasnya), adalah dengan menggunakan 4 gambar sudut bulat yang akan Anda posisikan di 4 sudut kotak Anda menggunakan 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;
}

Seperti disebutkan, ia memiliki batasnya (latar belakang di belakang kotak bulat harus polos jika sudut tidak cocok dengan latar belakang), tetapi ia bekerja dengan sangat baik untuk hal lain.

Diperbarui: Memperbaiki implikasi dengan menggunakan sprite sheet.

Saya pribadi menyukai solusi ini yang terbaik, dengan .htc untuk memungkinkan IE membuat batas melengkung.

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

Di Safari, Chrome, Firefox> 2, IE> 8 dan Konquerer (dan mungkin orang lain) Anda dapat melakukannya di CSS dengan menggunakan border-radius properti. Karena belum secara resmi menjadi bagian dari spesifikasi, silakan gunakan awalan khusus vendor ...

Contoh

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

Solusi JavaScript umumnya menambahkan tumpukan kecil div untuk membuatnya terlihat bulat, atau mereka menggunakan batas dan margin negatif untuk membuat sudut berlekuk 1px. Beberapa juga dapat menggunakan SVG di IE.

IMO, cara CSS lebih baik, karena mudah, dan akan menurun dengan anggun di browser yang tidak mendukungnya. Ini, tentu saja, hanya kasus di mana klien tidak menegakkan mereka di browser yang tidak didukung seperti IE <9.

Inilah solusi HTML / js / css yang saya lakukan baru-baru ini. Ada kesalahan pembulatan 1px dengan pemosisian absolut di IE sehingga Anda ingin wadahnya berukuran genap dengan lebar piksel, tetapi cukup bersih.

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;
}

Gambar hanya selebar 18px dan memiliki 4 sudut yang dikemas bersama. Tampak seperti lingkaran.

Catatan: Anda tidak memerlukan pembungkus dalam kedua, tapi saya suka menggunakan margin pada pembungkus dalam agar margin pada paragraf dan heading tetap mempertahankan runtuhnya margin. Anda juga dapat melewati jquery dan cukup meletakkan bungkus bagian dalam di html.

Sebagai indikasi betapa rumitnya untuk membuat sudut membulat bekerja, bahkan Yahoo tidak menganjurkannya (lihat poin berbutir pertama)! Memang, mereka hanya berbicara tentang sudut bulat 1 pixel dalam artikel itu tetapi menarik untuk melihat bahwa bahkan sebuah perusahaan dengan keahlian mereka telah menyimpulkan bahwa mereka terlalu banyak kesusahan untuk membuat mereka bekerja sebagian besar waktu.

Jika desain Anda dapat bertahan tanpa mereka, itu solusi termudah.

Tentu, jika lebar tetap, sangat mudah menggunakan CSS, dan sama sekali tidak menyinggung atau melelahkan. Saat Anda membutuhkannya untuk menskala di kedua arah, segalanya berubah menjadi berombak. Beberapa solusi memiliki jumlah div yang mengejutkan yang bertumpuk satu sama lain untuk mewujudkannya.

Solusi saya adalah mendiktekan perancang bahwa jika mereka ingin menggunakan sudut bulat (untuk saat ini), itu harus lebar tetap. Desainer suka sudut bulat (begitu juga saya), jadi saya menemukan ini sebagai kompromi yang masuk akal.

Perbatasan Ruzee adalah satu-satunya solusi rounded corner anti-alias berbasis Javascript yang saya temukan yang berfungsi di semua browser utama (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8), dan JUGA satu-satunya yang bekerja saat baik elemen bulat DAN elemen induk berisi gambar latar belakang. Itu juga berbatasan, bayangan, dan bercahaya.

RUZEE.ShadedBorder yang lebih baru adalah pilihan lain, tetapi tidak memiliki dukungan untuk mendapatkan informasi gaya dari CSS.

Jika Anda ingin menggunakan solusi radius batas, ada situs web yang luar biasa ini untuk menghasilkan css yang akan membuatnya berfungsi untuk safari / chrome / FF.

Bagaimanapun, saya pikir desain Anda tidak harus bergantung pada sudut bulat, dan jika Anda melihat Twitter, mereka hanya mengatakan F **** kepada pengguna IE dan opera. Sudut-sudut bulat adalah baik untuk dimiliki, dan saya pribadi menjaga ini untuk pengguna keren yang tidak menggunakan IE :).

Sekarang tentu saja itu bukan pendapat klien. Inilah tautannya: http://border-radius.com/

Untuk tambahan solusi htc yang disebutkan di atas, berikut ini adalah solusi dan contoh lain untuk mencapai sudut bulat di IE .

Tidak ada cara "yang terbaik"; ada cara yang bekerja untuk Anda dan cara yang tidak. Karena itu, saya memposting artikel tentang membuat CSS + Gambar, teknik sudut bulat cairan di sini:

Kotak dengan Sudut Bulat Menggunakan CSS dan Gambar - Bagian 2

Gambaran umum trik ini adalah yang menggunakan DIV bersarang dan pengulangan dan posisi gambar latar belakang. Untuk tata letak lebar tetap (ketinggian tetap lebar merenggang), Anda akan membutuhkan tiga DIV dan tiga gambar. Untuk tata letak lebar cairan (lebar dan tinggi yang dapat direnggangkan), Anda akan membutuhkan sembilan DIV dan sembilan gambar. Beberapa orang mungkin menganggapnya terlalu rumit tetapi IMHO itu solusi paling rapi yang pernah ada. Tanpa peretasan, tanpa JavaScript.

Saya menulis artikel blog tentang ini beberapa waktu lalu, jadi untuk info lebih lanjut, lihat di sini

<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>

Ini bekerja dengan sangat baik. Tidak diperlukan Javascript, hanya CSS dan HTML. Dengan minimal HTML mengganggu hal-hal lain. Ini sangat mirip dengan apa yang diposting Mono, tetapi tidak mengandung peretasan spesifik IE 6, dan setelah memeriksa, tampaknya tidak berfungsi sama sekali. Selain itu, trik lain adalah membuat bagian dalam setiap gambar sudut transparan sehingga tidak memblokir teks yang ada di dekat sudut. Bagian luar tidak boleh transparan sehingga dapat menutupi perbatasan div tidak bulat.

Juga, begitu CSS3 didukung secara luas dengan radius batas, itu akan menjadi cara terbaik resmi untuk membuat sudut-sudut yang membulat.

Jangan gunakan CSS, jQuery telah disebutkan beberapa kali. Jika Anda membutuhkan kontrol penuh atas latar belakang dan batas elemen Anda, cobalah jQuery Background Canvas Plugin . Ini menempatkan elemen Kanvas HTML5 di latar belakang dan memungkinkan Anda untuk menggambar setiap latar belakang atau perbatasan yang Anda inginkan. Sudut membulat, gradien dan sebagainya.

Opera belum mendukung radius perbatasan (tampaknya akan dirilis setelah versi 10). Sementara itu, Anda dapat menggunakan CSS untuk mengatur latar belakang SVG untuk membuat efek yang serupa .