การสร้างมุมโค้งมนโดยใช้ CSS [ปิด]

ฉันจะสร้างมุมโค้งมนโดยใช้ CSS ได้อย่างไร

เนื่องจากมีการแนะนำ CSS3 วิธีที่ดีที่สุดในการเพิ่มมุมมนด้วย CSS คือการใช้border-radiusคุณสมบัติ คุณสามารถอ่านข้อมูลจำเพาะเกี่ยวกับคุณสมบัติหรือรับข้อมูลการใช้งานที่มีประโยชน์บน MDN :

หากคุณใช้เบราว์เซอร์ที่ไม่ได้ ใช้งาน border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5) จากนั้นลิงก์ด้านล่างนี้จะแสดงรายละเอียดของวิธีการที่แตกต่างกันทั้งหมด ค้นหารูปแบบที่เหมาะสมกับเว็บไซต์และรูปแบบการเข้ารหัสของคุณและไปกับมัน

1. การออกแบบ CSS: การสร้างมุมและพรมแดนที่กำหนดเอง
2. CSS 'Roundup' มุมโค้งมน
3. 25 เทคนิคมุมโค้งมนด้วย CSS

ผมมองไปที่นี้ในช่วงต้นของการสร้างกองมากเกินและไม่สามารถหาสิ่งใด ๆวิธีการสร้างมุมโค้งมนที่ไม่ทิ้งฉันรู้สึกเหมือนฉันเพียงแค่เดินผ่านท่อระบายน้ำ

CSS3 ไม่ในที่สุดกำหนด

border-radius:

ซึ่งเป็นวิธีที่คุณต้องการให้มันทำงาน แม้ว่ามันจะใช้งานได้ดีใน Safari และ Firefox เวอร์ชันล่าสุด แต่ไม่ทั้งหมดใน IE7 (และฉันไม่คิดว่าเป็น IE8) หรือ Opera

ในขณะเดียวกันมันก็ยังแฮ็กไปตลอดทาง ฉันสนใจที่จะได้ยินว่าคนอื่นคิดอย่างไรเป็นวิธีที่สะอาดที่สุดในการทำเช่นนี้ใน IE7, FF2 / 3, Safari3 และ Opera 9.5 ในขณะนี้ ..

ฉันมักจะได้รับมุมโค้งมนเพียงแค่ css ถ้าเบราว์เซอร์ไม่สนับสนุนพวกเขาเห็นเนื้อหาที่มีมุมแบน หากมุมโค้งมนไม่สำคัญสำหรับเว็บไซต์ของคุณคุณสามารถใช้บรรทัดเหล่านี้ด้านล่าง

หากคุณต้องการใช้ทุกมุมที่มีรัศมีเดียวกันนี่เป็นวิธีที่ง่าย:

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

แต่ถ้าคุณต้องการควบคุมทุกซอกทุกมุมสิ่งนี้ดี:

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

ตามที่คุณเห็นในแต่ละชุดคุณมีสไตล์เฉพาะของเบราว์เซอร์และแถวที่สี่เราประกาศด้วยวิธีมาตรฐานโดยเราจะสมมติว่าในอนาคตคนอื่น ๆ (หวังว่า IE ก็เช่นกัน) ตัดสินใจที่จะใช้คุณลักษณะนี้เพื่อให้สไตล์ของเรา

อย่างที่บอกในคำตอบอื่น ๆ สิ่งนี้ใช้ได้กับ Firefox, Safari, Camino, Chrome

หากคุณสนใจที่จะสร้างมุมใน IE สิ่งนี้อาจเป็นประโยชน์สำหรับคุณ - http://css3pie.com/

ฉันอยากจะแนะนำให้ใช้ภาพพื้นหลัง วิธีอื่น ๆ ยังไม่ดี: ไม่มีการลบรอยหยักและมาร์กอัป นี่ไม่ใช่สถานที่ที่จะใช้ JavaScript

ดังที่ Brajeshwar กล่าวว่า: การใช้border-radiusตัวเลือก css3 ถึงตอนนี้คุณสามารถสมัคร-moz-border-radiusและ-webkit-border-radiusสำหรับเบราว์เซอร์ที่ใช้Mozilla และ Webkit ตามลำดับ

แล้วจะเกิดอะไรขึ้นกับ Internet Explorer Microsoft มีพฤติกรรมหลายอย่างที่ทำให้ Internet Explorer มีคุณสมบัติพิเศษบางอย่างและรับทักษะเพิ่มเติม

ที่นี่: .htcไฟล์พฤติกรรมที่จะได้รับround-cornersจากborder-radiusค่าใน CSS ของคุณ ตัวอย่างเช่น.

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

แน่นอนว่าตัวเลือกพฤติกรรมไม่ได้เป็นตัวเลือกที่ถูกต้อง แต่คุณสามารถวางลงในไฟล์ css อื่นที่มีความคิดเห็นตามเงื่อนไข (สำหรับ IE เท่านั้น)

ไฟล์พฤติกรรม HTC

ด้วยการสนับสนุน CSS3 ที่ถูกนำมาใช้ใน Firefox, Safari และ Chrome รุ่นใหม่กว่านี้ก็จะเป็นประโยชน์เช่นกันในการดู "Border Radius"

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

เช่นเดียวกับชวเลข CSS อื่น ๆ ข้างต้นยังสามารถเขียนในรูปแบบที่ขยายและทำให้บรรลุรัศมีชายแดนที่แตกต่างกันสำหรับ topleft, topright และอื่น ๆ

-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 เป็นวิธีที่ฉันจัดการกับสิ่งนี้เป็นการส่วนตัว การสนับสนุน css นั้นน้อยมากรูปภาพนั้นดูยุ่งเกินกว่าที่จะสามารถเลือกองค์ประกอบที่คุณต้องการให้มีมุมโค้งใน jQuery ได้อย่างสมบูรณ์แบบสำหรับฉันแม้ว่าบางคนจะไม่สงสัยเลยก็ตาม มีปลั๊กอินที่ฉันใช้เมื่อเร็ว ๆ นี้สำหรับโครงการที่ทำงานที่นี่: http://plugins.jquery.com/project/jquery-roundcorners-canvas

มีวิธี JavaScript เสมอ (ดูคำตอบอื่น ๆ ) แต่เนื่องจากเป็นสไตล์ล้วนๆฉันจึงไม่ใช้สคริปต์ไคลเอนต์เพื่อทำสิ่งนี้

วิธีที่ฉันชอบ (แม้ว่าจะมีขีด จำกัด ) ก็คือการใช้ภาพมุมโค้งมน 4 ภาพที่คุณจะวางตำแหน่งในมุมทั้งสี่ของกล่องโดยใช้ 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;
}

ตามที่กล่าวมามันมีขีด จำกัด (พื้นหลังด้านหลังกล่องกลมควรเป็นแบบเรียบง่ายมิฉะนั้นมุมจะไม่ตรงกับพื้นหลัง) แต่มันใช้งานได้ดีสำหรับสิ่งอื่น

อัปเดต:ปรับปรุงการฝังโดยใช้แผ่นสไปรต์

ฉันชอบโซลูชันนี้เป็นการส่วนตัวที่ดีที่สุดคือ. htc เพื่ออนุญาตให้ IE แสดงเส้นขอบโค้ง

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

ใน Safari, Chrome, Firefox> 2, IE> 8 และ Konquerer (และอื่น ๆ ) คุณสามารถทำได้ใน CSS โดยใช้border-radiusคุณสมบัติ เนื่องจากยังไม่ได้เป็นส่วนหนึ่งของข้อกำหนดอย่างเป็นทางการโปรดใช้คำนำหน้าเฉพาะของผู้ขาย ...

ตัวอย่าง

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

โดยทั่วไปแล้วโซลูชัน JavaScript จะเพิ่มฮีปขนาดเล็กdivเพื่อให้ดูกลมกลืนหรือใช้ขอบและระยะขอบติดลบเพื่อทำมุมบากขนาด 1px บางคนอาจใช้ SVG ใน IE

IMO วิธี CSS นั้นดีกว่าเพราะง่ายและจะลดระดับลงอย่างเบราว์เซอร์ในเบราว์เซอร์ที่ไม่รองรับ แน่นอนว่านี่เป็นเพียงกรณีที่ลูกค้าไม่บังคับใช้ในเบราว์เซอร์ที่ไม่รองรับเช่น IE <9

นี่คือโซลูชัน HTML / js / css ที่ฉันทำเมื่อเร็ว ๆ นี้ มีข้อผิดพลาดในการปัดเศษขนาด 1px ที่มีการกำหนดตำแหน่งที่แน่นอนใน IE ดังนั้นคุณจึงต้องการให้คอนเทนเนอร์มีขนาดพิกเซลกว้าง แต่มันค่อนข้างสะอาด

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

ภาพมีความกว้าง 18px และมีทั้ง 4 มุมรวมเข้าด้วยกัน ดูเหมือนวงกลม

หมายเหตุ: คุณไม่จำเป็นต้องใช้กระดาษห่อด้านในอันที่สอง แต่ฉันชอบที่จะใช้ขอบบนกระดาษห่อด้านในเพื่อให้ระยะขอบในย่อหน้าและส่วนหัวยังคงรักษาระยะขอบยุบอยู่ นอกจากนี้คุณยังสามารถข้าม jquery และเพียงใส่เสื้อคลุมด้านในใน html

เพื่อเป็นการบ่งบอกถึงความซับซ้อนในการทำให้มุมโค้งมนทำงานได้แม้Yahooจะกีดกันพวกเขา (ดูหัวข้อย่อยแรก)! จริงอยู่ที่พวกเขากำลังพูดถึงเพียง 1 พิกเซลในมุมที่โค้งมนในบทความนั้น แต่ก็น่าสนใจที่จะเห็นว่าแม้ บริษัท ที่มีความเชี่ยวชาญของพวกเขาได้ข้อสรุปว่าพวกเขาเจ็บปวดมากเกินไปที่จะให้พวกเขาทำงานเกือบตลอดเวลา

หากการออกแบบของคุณสามารถอยู่รอดได้โดยปราศจากพวกเขานั่นคือทางออกที่ง่ายที่สุด

แน่นอนว่าถ้าเป็นความกว้างคงที่มันเป็นเรื่องง่ายมากที่ใช้ CSS และไม่ใช่ความก้าวร้าวหรือความลำบาก เมื่อคุณต้องการปรับขนาดทั้งสองทิศทางเพื่อให้สิ่งที่ขาดหายไป โซลูชันบางตัวมี divs จำนวนมากที่ซ้อนกันอยู่ด้านบนเพื่อให้เกิดขึ้น

ทางออกของฉันคือบอกให้นักออกแบบว่าหากพวกเขาต้องการใช้มุมโค้งมน (ในขณะนั้น) มันต้องมีความกว้างคงที่ นักออกแบบชอบมุมโค้งมน (ฉันจะทำอย่างไร) ดังนั้นฉันจึงพบว่านี่เป็นการประนีประนอมที่สมเหตุสมผล

Ruzee Bordersเป็นโซลูชันมุมโค้งมนต่อต้านนามแฝงที่ใช้ JavaScript เท่านั้นที่ฉันพบว่าใช้งานได้กับเบราว์เซอร์หลัก ๆ ทั้งหมด (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8) และยังใช้งานได้เมื่อ ทั้งองค์ประกอบที่โค้งมนและองค์ประกอบหลักประกอบด้วยภาพพื้นหลัง นอกจากนี้ยังมีเส้นขอบเงาและประกาย

RUZEE.ShadedBorder ที่ใหม่กว่าเป็นอีกตัวเลือกหนึ่ง แต่ขาดการสนับสนุนในการรับข้อมูลสไตล์จาก CSS

หากคุณจะไปกับการแก้ปัญหาชายแดนรัศมีมีเว็บไซต์ที่น่ากลัวนี้เพื่อสร้าง css ที่จะทำให้มันทำงานได้สำหรับซาฟารี / chrome / FF

อย่างไรก็ตามฉันคิดว่าการออกแบบของคุณไม่ควรขึ้นอยู่กับมุมโค้งมนและถ้าคุณดูที่ Twitter พวกเขาแค่พูด F **** กับผู้ใช้ IE และ Opera มุมโค้งมนเป็นสิ่งที่ดีที่จะมีและฉันเองก็เก็บเรื่องนี้ไว้สำหรับผู้ใช้เท่ห์ ๆ ที่ไม่ได้ใช้ IE :)

แน่นอนว่ามันไม่ใช่ความคิดเห็นของลูกค้า นี่คือลิงค์คือ: http://border-radius.com/

ที่นอกเหนือจากการแก้ปัญหา HTC พูดถึงข้างต้น here're อีกโซลูชั่นและตัวอย่างในการเข้าถึงมุมโค้งมนใน IE

ไม่มีทาง "ดีที่สุด"; มีวิธีที่เหมาะกับคุณและวิธีการที่ไม่เป็น ต้องบอกว่าฉันโพสต์บทความเกี่ยวกับการสร้าง CSS + รูปภาพที่ใช้เทคนิคมุมโค้งมนเหลวที่นี่:

กล่องที่มีมุมกลมโดยใช้ CSS และรูปภาพ - ส่วนที่ 2

ภาพรวมของเคล็ดลับนี้คือการใช้ DIV ที่ซ้อนกันและการทำซ้ำภาพพื้นหลังและการวางตำแหน่ง สำหรับเลย์เอาต์ความกว้างคงที่ (ความสูงความกว้างคงที่ความกว้างคงที่) คุณต้องมีสาม DIV และสามภาพ สำหรับเลย์เอาต์ความกว้างของเหลว (ความกว้างและความสูงที่ยืดหยุ่นได้) คุณจะต้องใช้ DIV เก้าตัวและเก้าภาพ บางคนอาจคิดว่ามันซับซ้อนเกินไป แต่ IMHO เป็นทางออกที่ประณีตที่สุดเท่าที่เคยมีมา ไม่มีแฮ็คไม่มี JavaScript

ฉันเขียนบทความเกี่ยวกับเรื่องนี้สักครู่เพื่อดูข้อมูลเพิ่มเติมดูที่นี่

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

มันใช้งานได้ค่อนข้างดี ไม่จำเป็นต้องใช้ Javascript เพียง CSS และ HTML ด้วย HTML ที่รบกวนน้อยที่สุดกับสิ่งอื่น ๆ มันคล้ายกับสิ่งที่ Mono โพสต์ แต่ไม่มีแฮ็คเฉพาะ IE 6 และหลังจากตรวจสอบดูเหมือนจะไม่ทำงานเลย นอกจากนี้ยังมีเคล็ดลับอีกประการหนึ่งคือการทำให้ส่วนด้านในของภาพแต่ละมุมโปร่งใสดังนั้นจึงไม่บล็อกข้อความที่อยู่ใกล้มุม ส่วนด้านนอกจะต้องไม่โปร่งใสดังนั้นจึงสามารถปกปิดเส้นขอบของ div ที่ไม่กลม

นอกจากนี้เมื่อ CSS3 ได้รับการสนับสนุนอย่างกว้างขวางด้วยรัศมีเส้นขอบนั่นจะเป็นวิธีที่ดีที่สุดในการทำมุมโค้งมน

อย่าใช้ CSS jQuery ถูกกล่าวถึงหลายครั้ง หากคุณต้องการควบคุมพื้นหลังและเส้นขอบขององค์ประกอบของคุณอย่างเต็มที่ลองปลั๊กอินผ้าใบพื้นหลัง jQuery มันวางองค์ประกอบผ้าใบ HTML5 ในพื้นหลังและช่วยให้คุณวาดทุกพื้นหลังหรือเส้นขอบที่คุณต้องการ มุมโค้งมนไล่ระดับสีและอื่น ๆ

Opera ยังไม่รองรับรัศมีเส้นขอบ (เห็นได้ชัดว่ามันจะเปิดตัวหลังจากรุ่น 10) ในขณะเดียวกันคุณสามารถใช้ CSS เพื่อตั้งพื้นหลัง SVG เพื่อสร้างผลที่คล้ายกัน