Wstawienie obramowania z promieniem CSS3

Question

Czy istnieje sposób utworzenia promienia obramowania z css3? (Bez obrazy)

muszę promień graniczny takiego:

Answer 1

Najlepszy sposób, w jaki udało mi się to osiągnąć przy użyciu wszystkich CSS i HTML (brak obrazów itp.) To using CSS3 gradients, według Lea Verou. Z jej rozwiązania:

div.round { 
    background: 
     -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background: 
     -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background: 
     -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background-position: bottom left, bottom right, top right, top left; 
     -moz-background-size: 50% 50%; 
     -webkit-background-size: 50% 50%; 
    background-size: 50% 50%; 
    background-repeat: no-repeat; 
} 

Wynik netto to zestaw przezroczystych gradientów z krzywymi. Zobacz pełną wersję gry JSFiddle i obejrzyj ją tak, jak wygląda.

Oczywiście to zależy od poparcia dla rgba i gradient, a zatem powinny być traktowane jako stopniowe wzmocnienie, lub jeśli jest to niezbędne do projektowania, należy dostarczyć obrazu zastępczego opartego dla starszych przeglądarek (zwłaszcza IE, który nie robi” t wsparcie gradient nawet przez IE9).

Answer 2

nie wygląda jak to możliwe. Wypróbowałem promień obrysu o wartości ujemnej, aby zobaczyć, co się stanie, ale nie przyniosło to efektu.

Edit:

Nawet jeśli przerwa pudełko na mniejsze części, w pewnym momencie, że trzeba jeszcze stworzyć przejrzystą wstawka rożny. Przejrzystość jest trudną częścią, która może uniemożliwić taką możliwość bez obrazów. Zasadniczo musisz mieć możliwość renderowania przezroczystego kręgu z nieprzezroczystym otoczeniem bg (a jeśli jest to możliwe w CSS, chciałbym wiedzieć jak to zrobić :)

Jeśli nie potrzebujesz przezroczystości, są sposoby, aby to zrobić.

Answer 3

Nie sądzę, że byłoby to możliwe, gdyby narożniki były przezroczyste, ale jeśli tło jest znane, można utworzyć element div w każdym rogu z zaokrągloną krawędzią. Jeśli te elementy div mają taki sam kolor tła, jak tło strony, efekt zadziała.

Zobacz mój przykład tutaj http://jsfiddle.net/TdDtX/

#box { 
 
    position: relative; 
 
    margin: 30px; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    border: 1px solid #333; 
 
} 
 

 
.corner { 
 
    position: absolute; 
 
    height: 10px; 
 
    width: 10px; 
 
    border: 1px solid #333; 
 
    background-color: #fff; 
 
} 
 

 
.top-left { 
 
    top: -1px; 
 
    left: -1px; 
 
    border-radius: 0 0 100% 0; 
 
    border-width: 0 1px 1px 0; 
 
} 
 

 
.top-right { 
 
    top: -1px; 
 
    left: 190px; 
 
    border-radius: 0 0 0 100%; 
 
    border-width: 0 0 1px 1px; 
 
} 
 

 
.bottom-left { 
 
    top: 90px; 
 
    left: -1px; 
 
    border-radius: 0 100% 0 0; 
 
    border-width: 1px 1px 0 0; 
 
} 
 

 
.bottom-right { 
 
    top: 90px; 
 
    left: 190px; 
 
    border-radius: 100% 0 0 0; 
 
    border-width: 1px 0 0 1px; 
 
}

<div id="box"> 
 
    <div class="corner top-left"></div> 
 
    <div class="corner top-right"></div> 
 
    <div class="corner bottom-left"></div> 
 
    <div class="corner bottom-right"></div> 
 
</div>

Answer 4

Można osiągnąć ten efekt z nowymi CSS3-border-obrazów (dobrze, to obrazy, ale waga bez problemów). Ale jest to całkiem nowe i niezbyt szeroko obsługiwane (dobrze we wszystkich przyzwoitych przeglądarkach (z prefiksami) z wyjątkiem IE, aby być precyzyjnym;)).

Przyjemny artykuł o obrazach na granicy csstricks.

Browser Support

Answer 5

Hmm można ewentualnie skorzystać z tej małej sztuczki, żeby stworzyć Inset Border Radius

Następnie wspierać przejrzystość trzeba by chyba dodawać inne bloki pomiędzy. Mniej więcej tak, jak robiono stare zaokrąglone obrazy; mając rozpiętość dla każdego rogu z przezroczystym obrazem. I rozciąga się po bokach i na górze, aby wypełnić pustą przestrzeń. Zamiast używać obrazów, możesz użyć tej sztuczki, aby zrobić to w CSS.

Answer 6

body { 
 
    background: #fff; 
 
} 
 

 
.div{ 
 
position:relative; 
 
} 
 
.box { 
 
background: #f7f7f7; 
 
height: 178px; 
 
width: 409px; 
 
margin: 25px; 
 
/*padding: 20px;*/ 
 
position: relative; 
 
overflow: hidden; 
 
border: 1px solid #ccc; 
 
border-left: 0px; 
 
} 
 
.box:before { 
 
content: ""; 
 
display: block; 
 
background: #fff; 
 
position: absolute; 
 
top: -33px; 
 
left: -263px; 
 
width: 300px; 
 
height: 242px; 
 
border-radius: 300px; 
 
border: 1px solid #ccc; 
 
}

<div class="div"> 
 
<div class="box"></div> 
 
</div> 
 

 
</body> 
 
</html>

przykład: http://jsfiddle.net/dVmX3/

Answer 7

Można to osiągnąć przez umieszczenie całkowicie przezroczystych elementów koła w narożnikach skrzyni cieni. Użyłem kombinacji ukrytych przepełnionych elementów div zawierających przęsła, cienie skrzynek, ramki i pseudo selektory.

Sprawdź mój example.

to jest HTML podstawowe i CSS trzeba zacząć:

a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;} 
 

 
a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;} 
 
a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;} 
 

 
a div:first-of-type {left: -14px;} 
 
a div:first-of-type:after {left:0;} 
 

 
a div:last-of-type {right: -14px;} 
 
a div:last-of-type:after {right:0;} 
 

 
a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;} 
 

 
a div:first-of-type span {left:-20px;} 
 
a div:first-of-type span:first-child {top:-20px;} 
 
a div:first-of-type span:last-child {bottom:-20px;} 
 

 
a div:last-of-type span {right:-20px;} 
 
a div:last-of-type span:first-child {top:-20px;} 
 
a div:last-of-type span:last-child {bottom:-20px;}

<a href=""> 
 
    <div> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 

 
    <div> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 
</a>

Answer 8

body { 
 
    background: #fff; 
 
} 
 

 
.div{ 
 
position:relative; 
 
} 
 
.box { 
 
background: #f7f7f7; 
 
height: 178px; 
 
width: 409px; 
 
margin: 25px; 
 
/*padding: 20px;*/ 
 
position: relative; 
 
overflow: hidden; 
 
border: 1px solid #ccc; 
 
border-left: 0px; 
 
} 
 
.box:before { 
 
content: ""; 
 
display: block; 
 
background: #fff; 
 
position: absolute; 
 
top: -33px; 
 
left: -263px; 
 
width: 300px; 
 
height: 242px; 
 
border-radius: 300px; 
 
border: 1px solid #ccc; 
 
}

<div class="div"> 
 
<div class="box"></div> 
 
</div> 
 

 
</body> 
 
</html>