Skep geronde hoeke met behulp van CSS [gesluit]

StackOverflow https://stackoverflow.com/questions/7089

Vra

Hoe kan ek skep geronde hoeke met behulp van CSS?

Was dit nuttig?

Oplossing

Sedert CSS3 ingestel is, die beste manier om geronde hoeke met behulp van CSS voeg is deur die gebruik van die eiendom border-radius. Jy kan href="http://www.w3.org/TR/css3-background/#the-border-radius" lees die spec op die eiendom, of kry 'n paar nuttige inligting implementering op MDN :

As jy 'n leser wat nie implementeer border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-weergawe 10.5, Safari pre-v5), dan die skakels hier onder detail 'n hele klomp van die verskillende benaderings. Vind een wat pas by jou webwerf en kodering styl, en daarmee saamgaan.

  1. CSS Design: Skep Custom Corners & Grense
  2. CSS geronde hoeke 'Roundup'
  3. 25 geronde hoeke tegnieke met CSS

Ander wenke

Ek kyk na hierdie vroeg in die skepping van stapel Oorloop en kon dit nie vind enige metode van die maak van geronde hoeke wat my nie laat voel asof ek net loop deur 'n riool.

CSS3 beteken uiteindelik definieer die 

border-radius:

Dit is presies hoe jy wil hê dit moet werk. Alhoewel hierdie werk OK in die nuutste weergawes van Safari en Firefox, maar glad nie in IE7 (en ek dink nie in IE8) of Opera.

In die tussentyd, dit is hacks al die pad af. Ek stel belang in die aanhoor van wat ander mense dink is die skoonste manier om dit te doen oor IE7, FF2 / 3, Safari3, en Opera 9.5 op die oomblik ..

Ek kry gewoonlik geronde hoeke net met css, indien blaaier ondersteun nie sien hulle die inhoud met plat hoeke. As geronde hoeke is nie so krities vir jou webwerf kan jy dit hierdie lyne hieronder te gebruik.

As jy wil hê dat alle hoeke gebruik met dieselfde radius dit is die maklike manier: 

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

As jy wil elke hoek beheer dit goed: 

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

As jy sien in elke stel jy die leser spesifieke style en op die vierde rye ons verklaar in standaard manier deur hierdie ons aanvaar as in die toekoms die ander (hopelik IE te) besluit om die implementering van die funksie te hê ons styl wees gereed vir hulle ook.

Soos vertel in ander antwoorde, dit werk pragtig op Firefox, Safari, Camino, Chrome.

As jy belangstel in die skep van hoeke in IE dan is dit dalk van nut wees is - http://css3pie.com/

Ek sou raai die gebruik van agtergrond beelde. Die ander maniere is nie naastenby so goed: Geen anti-aliasing en sinnelose opmaak. Dit is nie die plek om JavaScript te gebruik.

Met ondersteuning vir CSS3 in nuwer weergawes van Firefox, Safari en Chrome geïmplementeer word, sal dit ook nuttig wees om te kyk na "Border Radius". 

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

Soos enige ander CSS snelskrif, die bogenoemde kan ook geskryf word in uitgebreide formaat, en dus bereik verskillende Border Radius vir die topleft, topright, ens. 

-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 is die manier wat ek wil persoonlik te gaan met hierdie. css ondersteuning is minimaal, beelde is te fiddly, in staat wees om die elemente wat jy wil ronde hoeke het in jQuery maak perfekte sin vir my selfs al het sommige geen twyfel anders sal argumenteer kies. Daar is 'n plugin wat ek onlangs gebruik vir 'n projek by die werk hier: http: //plugins.jquery. com / projek / jQuery-roundcorners-doek

Daar is altyd die JavaScript manier (sien ander antwoorde) maar aangesien dit is suiwer stilering, ek is soort van teen gebruik kliënt skrifte om dit te bereik.

Die manier waarop ek verkies (alhoewel dit het sy grense), is om te gebruik 4 afgeronde hoek beelde wat jy sal posisioneer in die 4 hoeke van jou boks met behulp van 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;
}

Soos reeds genoem, is dit het sy grense (die agtergrond agter die ronde boks moet plain wees anders sal die hoeke sal nie ooreenstem met die agtergrond), maar dit werk baie goed vir enige iets anders.

Opdateer:. Verbeterde die implentation deur gebruik te maak van 'n sprite vel

Ek persoonlik hou van hierdie oplossing die beste, sy 'n Htc om voorsiening te maak IE aan geboë grense te lewer.

http://www.htmlremix.com/css/ geboë-hoek-grens-radius-kruis-leser

In Safari, Chrome, Firefox> 2, IE> 8 en Konquerer (en waarskynlik ander) kan jy dit doen in CSS deur gebruik te maak van die eiendom border-radius. As dit is nie amptelik deel van die spec nog, gebruik asseblief 'n ondernemer spesifieke voorvoegsel ...

Voorbeeld 

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

Die JavaScript oplossings te voeg oor die algemeen 'n hoop klein divs te maak dat dit lyk afgeronde, of hulle gebruik grense en negatiewe marges te maak 1px gekerfde hoeke. Sommige mag ook SVG gebruik in Internet Explorer.

IMO, die CSS manier is beter, want dit is maklik, en sal grasieus in blaaiers wat nie ondersteun dit verneder. Dit is natuurlik net die geval waar die kliënt hulle nie dwing in 'n nie ondersteun blaaiers soos Internet Explorer <9.

Hier is 'n HTML / js / css oplossing wat ek onlangs gedoen het. Daar is 'n 1px afronding fout met absolute posisie in Internet Explorer, sodat jy wil hê dat die houer van 'n ewe aantal pixels wyd wees, maar dit is redelik skoon.

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

Beeld is net 18px wyd en het al 4 hoeke saam verpak. Lyk soos 'n sirkel.

Let wel: jy hoef nie die tweede innerlike omhulsel nodig, maar ek hou van marge gebruik op die innerlike wrapper sodat marges op paragrawe en opskrifte nog marge ineenstorting in stand te hou. Jy kan ook slaan die jQuery en net sit die binneste omslag in die html.

Seker, as dit 'n vaste wydte, dit is super maklik met behulp van CSS, en glad nie aanval of moeisame. Dit is wanneer jy dit nodig het om skaal in beide rigtings wat dinge woelig. Sommige van die oplossings het 'n verbysterende hoeveelheid divs gestapel op die top van mekaar te sorg dat dit gebeur.

My oplossing is om te bepaal tot die ontwerper wat as hulle wil geronde hoeke gebruik (vir die oomblik), is dit nodig om 'n vaste wydte wees. Ontwerpers is lief vir geronde hoeke (so doen ek), so ek vind dit 'n redelike kompromie wees.

Ruzee Grense is die enigste Javascript-gebaseerde anti-aliased afgeronde hoek oplossing Ek vyf gevind wat werk in al die groot blaaiers (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8), en ook die enigste een wat werk wanneer beide die afgeronde element en die ouer element 'n agtergrond beeld bevat. Dit maak ook grense, skadu, en gloeiende.

Die nuwer RUZEE.ShadedBorder is 'n ander opsie, maar dit het nie ondersteuning vir die verkryging van styl inligting van CSS.

As jy om te gaan met die grens-radius oplossing, daar is hierdie awesome webwerf by die css wat sal maak dat dit werk vir safari / Chrome / VF genereer.

In elk geval, ek dink jou ontwerp moet nie afhang van die afgeronde hoek, en as jy kyk na Twitter, sê hulle net F **** om Internet Explorer en opera gebruikers. Geronde hoeke is 'n lekker om te hê, en ek is persoonlik ok hou dit vir die koel gebruikers wat nie Internet Explorer gebruik nie.)

Nou natuurlik is dit nie die mening van die kliënte. Hier is die skakel: http://border-radius.com/

Om byvoeging van HTC oplossings noem hierbo, here're ander oplossings en voorbeelde te bereik geronde hoeke in Internet Explorer .

Daar is geen "die beste" manier; daar is maniere wat vir jou werk en maniere wat dit nie doen nie. Noudat dit gesê is, ek 'n artikel oor die skep van CSS + Image gebaseer, vloeistof ronde hoek tegniek hier gepos:

Box met Round hoeke met behulp van CSS en Images - Deel 2

'n Oorsig oor hierdie truuk is dat dit gebruik geneste divs en beeld agtergrond herhaling en plasing. Vir vaste wydte uitlegte (vaste wydte rekbare hoogte), sal jy drie divs en drie beelde nodig. Vir 'n vloeistof breedte uitleg (rekbare breedte en hoogte) jy nege divs en nege beelde nodig. Sommige sal dalk oorweeg dit te ingewikkeld maar IMHO sy die netjiesste oplossing ooit. Geen hacks, geen JavaScript.

Ek het 'n blog artikel oor hierdie 'n ruk terug, so vir meer inligting, sien hier 

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

Dit werk baie goed. Geen Javascript nodig is, net CSS en HTML. Met 'n minimale HTML te meng met die ander dinge. Dit is baie soortgelyk aan wat Mono gepos, maar geen IE 6 spesifieke hacks bevat, en na die monitor, lyk nie te werk nie. Ook 'n ander truuk is die binnekant gedeelte elke beeld hoek van deursigtige, sodat dit nie die teks wat is naby die hoek nie blok te maak. Die buitenste gedeelte moet nie deursigtig wees sodat dit kan toesmeer die grens van die nie-afgeronde div.

Ook, wanneer CSS3 wyd ondersteun word met grens-radius, wat sal die amptelike beste manier om geronde hoeke wees.

Moenie CSS, jQuery is 'n paar keer genoem. As jy die volle beheer van die agtergrond en grens van jou elemente moet gee die jQuery agtergrond doek Plugin 'n drie. Dit plaas 'n element HTML5 Canvas in die agtergrond en laat yo om elke agtergrond of grens wat jy wil trek. Geronde hoeke, gradiënte en so aan.

Opera nog nie ondersteun grens-radius (blykbaar sal dit wees in die vrylating na weergawe 10). In die tussentyd, kan jy gebruik CSS om 'n stel SVG agtergrond om 'n soortgelyke effek skep.

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top