Col?uri rotunjite CSS border-radius
CSS Tutorial » Col?uri rotunjite CSS border-radius
Proprietatea CSS border-radius rotunje?te col?urile marginii exterioare a unui element.
Pute?i seta o singur? raz? pentru a face col?uri circulare sau dou? raze pentru a face col?uri eliptice.
Sintaxa:
Acest element verde are o l??ime de 300 px, o în?l?ime de 150 px, un chenar rosu cu raza: 20 px, solid, o margine galben? de 10 px ?i centrat în centru.
Proprietate de col? rotunjit: border-radius
Proprietatea CSS border-radius define?te raza col?urilor unui element.
<!DOCTYPE html>
<html>
<head>
<style>
#colt1 {
border-radius: 25px;
padding: 20px;
width: 200px;
height: 150px;
background-color: #C6EB94;
}#colt2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}#colt3 {
border-radius: 25px;
background: url(https://www.agernic.com/uploads/paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body><h1>La propiedad border-radius</h1>
<p>Col?uri rotunjite pentru un element cu o anumit? culoare de fundal:</p>
<p id="colt1">Colturi rotunjite!</p>
<p>Col?uri rotunjite pentru un element cu margine:</p>
<p id="colt2">Colturi rotunjite!</p>
<p>Col?uri rotunjite pentru un element cu o imagine de fundal:</p>
<p id="colt3">Colturi rotunjite!</p></body>
</html>
Etiquetas: col? rotunjit, col?uri rotunjite, css3 col?uri rotunjite div, col? rotund css
CSS border-radius: specificare fiecare col?
Proprietatea de raz? a chenarului este specificat? ca:
1. una, dou?, trei sau patru valori <lungime> sau <procentaj>.
Folosit pentru a seta o singur? raz? pentru col?uri
2. op?ional urmat de „/” ?i una, dou?, trei sau patru valori <length> or <percentage>.
Aceasta este utilizat? pentru a seta o raz? suplimentar?, astfel încât s? pute?i avea col?uri eliptice.
<!DOCTYPE html>
<html>
<head>
<style>
/* The syntax of the first radius allows one to four values */
#colt1{
/* Radius is set for all 4 sides */
border-radius: 15px;
height: 150px;
width: 300px;
background-color: #FF9;
padding: 10px;
}
#colt2{
/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;
background-color: #CFF;
height: 150px;
width: 300px;
padding: 10px;
}
#colt3{
/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 20px 40px 20px;
background-color: #71FF95;
height: 150px;
width: 300px;
padding: 10px;
}
#colt4{
/* top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 0 30px 40px;
height: 150px;
width: 300px;
padding: 10px;
background-color: #CCC;
}
#colt5{
/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;
height: 150px;
width: 300px;
padding: 10px;
background-color: #C9F;
}
#colt6{
/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 15% / 20px 30px;
height: 150px;
width: 300px;
padding: 10px;
background-color: #0FF;
}
#colt7{
/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
height: 150px;
width: 300px;
padding: 10px;
background-color: #FFCACA;
}
#colt8{
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 15% / 20px 25em 30px 35em;
height: 150px;
width: 300px;
padding: 10px;
background-color: #6F9;
}
#colt9{
/* Global values */
border-radius: inherit;
height: 150px;
width: 300px;
padding: 10px;
background-color: #FDB;
}
#colt10{
border-radius: initial;
height: 150px;
width: 300px;
padding: 10px;
background-color: #CACAFF;
}
#colt11{
border-radius: unset;
height: 150px;
width: 300px;
padding: 10px;
background-color: #FF8AFF;
}
</style>
</head>
<body><h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="colt1">Rounded corners! colt1<br />
<strong>Radius is set for all 4 sides</strong><br />
border-radius: 15px;<br />
height: 150px;<br />
width: 300px;<br />
background-color: #FF9;<br />
padding: 10px;</p>
<p id="colt2">Rounded corners! colt2<br />
<strong>top-left-and-bottom-right | top-right-and-bottom-left</strong><br />
border-radius: 10px 5%;<br />
background-color: #CFF;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;</p>
<p id="colt3">Rounded corners! colt3<br />
<strong>top-left | top-right-and-bottom-left | bottom-right</strong><br />
border-radius: 20px 40px 20px;<br />
background-color: #71FF95;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;</p>
<p id="colt4">Rounded corners! colt4<br />
<strong>top-left | top-right | bottom-right | bottom-left</strong><br />
border-radius: 10px 0 30px 40px;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #CCC;</p>
<p id="colt5">Rounded corners! colt5<br />
border-radius: 10px / 20px;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #C9F;</p>
<p id="colt6">Rounded corners! colt6<br />
<strong>(first radius values) / top-left-and-bottom-right | top-right-and-bottom-left</strong><br />
border-radius: 10px 15% / 20px 30px;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #0FF;</p>
<p id="colt7">Rounded corners! colt7<br />
<strong>(first radius values) / top-left | top-right-and-bottom-left | bottom-right </strong><br />
border-radius: 10px 5px 2em / 20px 25px 30%;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #FFCACA;</p>
<p id="colt8">Rounded corners! colt8<br />
<strong>(first radius values) / top-left | top-right | bottom-right | bottom-left </strong><br />
border-radius: 10px 15% / 20px 25em 30px 35em;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #6F9;</p>
<p id="colt9">Rounded corners! colt9<br />
<strong>Global values</strong><br />
border-radius: inherit;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #FDB;<br />
}</p>
<p id="colt10">Rounded corners! colt10<br />
border-radius: initial;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #CACAFF;</p>
<p id="colt11">Rounded corners! colt11 <br />
border-radius: unset;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #FF8AFF;</p></body>
</html>
Prefixul -moz-
Browserul Firefox Mozilla a acceptat proprietatea border-radius, prefixat? cu -moz-, de la versiunea 1.0. Cu toate acestea, abia de la versiunea 3.5 browserul a permis col?urile eliptice, adic? acceptarea a dou? valori pe col? pentru a determina independent razele orizontale ?i verticale.
Singura diferen?? major? const? în numele chenarului individual - * - propriet??i radio, cu propriet??ile prefixate cu -moz- urmând o conven?ie de denumire u?or diferit?, dup? cum urmeaz?:
| W3C Specifica?ie | Implementarea Mozilla |
|---|---|
| border-radius | -moz-border-radius |
| border-top-left-radius | -moz-border-radius-topleft |
| border-top-right-radius | -moz-border-radius-topright |
| border-bottom-right-radius | -moz-border-radius-bottomright |
| border-bottom-left-radius | -moz-border-radius-bottomleft |
<!DOCTYPE html>
<html>
<head>
<style>
#Example_A {
height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
background-color: #CCC;
padding: 10px;
}
#Example_B {
height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
background-color: #FF9;
padding: 10px;
}#Example_C {
height: 160px;
width:300px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
background-color: #CCF;
padding: 10px;
}#Example_D {
height: 15em;
width: 30em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
background-color: #0FF;
padding: 10px;
}
</style>
</head>
<body><h1>La propiedad border-radius</h1>
<p>Esquinas redondeadas para un elemento con un color de fondo específico:</p>
<p id="Example_A"> height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
background-color: #CCC;
padding: 10px;</p>
<p id="Example_B"> height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
background-color: #FF9;
padding: 10px;</p>
<p id="Example_C"> height: 160px;
width:300px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
background-color: #CCF;
padding: 10px;</p>
<p id="Example_D"> height: 15em;
width: 30em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
background-color: #0FF;
padding: 10px;</p></body>
</html>
col?uri rotunjite css buton
border-radius pentru imagine sau fotos
border-radius pentru tabele
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.