css - superiores - ¿Cómo hacer esquinas redondeadas tanto dentro de una caja como en su borde?
quitar bordes redondeados css (7)
Basado en la idea de Leo Wu, aquí está mi solución:
.my-div
{
background-color: white;
border: solid 20px black;
border-radius: 10px;
box-shadow: 0 0 10px black;
height: 100px;
left: 30px;
position: relative;
top: 20px;
width: 200px;
}
.my-div:before
{
background-color: white;
border-radius: 5px;
content: "";
display: block;
height: calc(100% + 20px);
left: -10px;
position: absolute;
top: -10px;
width: calc(100% + 20px);
z-index: 1;
}
.some-content
{
height: calc(100% + 20px);
left: -10px;
position: relative;
top: -10px;
width: calc(100% + 20px);
z-index: 3;
}
.some-header
{
background-color: green;
border-radius: 5px 5px 0 0;
height: 30px;
}
<html>
<body>
<div class="my-div">
<div class="some-content">
<div class="some-header">my title</div>
<div>some other content</div>
</div>
</div>
</body>
</html>
Creo que el título es algo difícil de entender, así que lo explicaré. Estoy tratando de lograr este efecto:
(una caja que tiene esquinas redondeadas y su borde, que también tiene bordes redondeados).
Pude hacer esto, usando la propiedad background-clip :
(esquinas redondeadas para el borde pero no para la caja interna)
La pregunta es, ¿cómo puedo lograr esquinas redondeadas para la caja interna?
¡Gracias!
EDITAR
El HTML que estoy usando:
<header class="body template-bg template-border radius-all">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
</header>
Y el CSS:
.radius-all {border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.template-bg {background:#FFF; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box;}
.template-border {border:5px solid rgba(255, 255, 255, 0.2);}
Como no existe el inner-border-radius para CSS, los navegadores lo predeterminan a border-radius - border-width . Si no te gusta, la solución típica es crear dos divs con bordes para imitar el radio del borde interno, pero esta solución trae más diseño en el html. También es un dolor si se trata de una plantilla de borde común utilizada en todo el sitio.
Me las arreglé para encontrar una forma de mantener todo en CSS produciendo el div interno usando :after y content: "" . Entonces para su caso sería:
.template-border {
position: relative;
border-radius: 5px;
background-color: #000;
border: 10px solid #000;
z-index: -2;
}
.template-border:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px;
background-color: #FFF;
z-index: -1;
}
Debe hacer que el radio del borde tenga un valor mayor que el ancho del borde hasta que comience a ver una curva. No es una fórmula establecida para establecer el radio del borde de + 1px mayor que el ancho del borde. Sin embargo, va a ser un valor positivo, definitivamente. Debes experimentar en los diferentes navegadores donde lo necesites hasta que veas el valor de radio límite más pequeño posible que funcione lo suficientemente bien para ti en la mayoría de los navegadores. (Algunos navegadores pueden no admitir esto.) Por ejemplo, en Google Chrome, establecí un ancho de borde de 10px, pero tuve que establecer el radio de borde a 13px antes de comenzar a ver una apariencia de una curva de borde interior, mientras que 15px funcionó aún mejor
El problema no es la codificación del CSS sino las matemáticas de un círculo. Básicamente, su border-inner-radius (sé que esta propiedad no existe) es igual al border-radius border-width .
Simplemente resuelva qué quiere que sea su radio interno y luego agregue el ancho del borde para lograr el efecto deseado.
border-inner-radius + border-width = border-radius
Necesita tener dos elementos div, uno dentro del otro, y usar un css de esquina redondeada de navegador cruzado, como este:
.small-rounded {
border: 1px solid ##000;
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}
Otra solución es hacer coincidir los bordes internos y externos combinados con border-radius para "falsificar" el borde usando el valor <spread-radius> de la propiedad box-shadow . Esto produce una sombra sólida que puede pasar fácilmente por un borde regular.
Por ejemplo, para lograr un borde de 4px y un radio de borde blanco de 4px, intente esto:
/* rounded corners */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 0px 4px #fff;
box-shadow: 0px 0px 0px 4px #fff;
Si desea agregar una sombra paralela "real" a todo el contenedor, simplemente puede encadenar sus declaraciones shadow de la siguiente manera:
/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
1px 1px 8px 0 rgba(0,0,0,0.4);
Nota: Tenga en cuenta que el orden de las declaraciones es el orden en el que se representará.
Lo único que hay que tener en cuenta es que el "borde falso" inicial se superpondrá a los primeros X píxeles (donde X es el ancho del borde) de cualquier sombra que desee debajo (y combine, si usa opacidad RGBa en él debajo del 100%)
Por lo tanto, no funcionará en todas las situaciones, pero obtendrá la mayoría. Utilizo esto con bastante frecuencia cuando los bordes regulares no son ideales.
Cálculos fronterizos internos
En primer lugar, deberá eliminar -vendor-background-clip: padding-box o establecerlos en border-box forma predeterminada para lograr el radio del borde interior.
El radio del borde interior se calcula como la diferencia entre el radio del borde exterior (radio del border-radius ) y el ancho del borde (ancho del border-width ) de manera que
inner border radius = outer border radius - border width
Siempre que el border-width del border-width sea mayor que el border-radius del borde, el radio del borde interno es negativo y se obtienen algunas esquinas invertidas incómodas. Actualmente, no creo que haya una propiedad para ajustar el inner-border-radius , por lo que deberá calcularlo manualmente.
En tu caso:
inner border radius = 6px - 5px = 1px
Su nuevo CSS debe ser:
.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }
Simplemente resta los valores de border-radius borde (6px) del valor de border-width (5px) para lograr el radio de borde interno deseado:
Código que funciona para mí
Probado en Firefox 3.x, Google Chrome y Safari 5.0
.radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */
Agregar superposiciones de color en JavaScript
<script type="text/javascript">
var bodyBgColor = document.getElementsByTagName(''body'')[0].style.backgroundColor;;
// insert opacity decreasing code here for hexadecimal
var header = document.getElementsByTagName(''header'')[0];
header.style.backgroundColor = bodyBgColor;
</script>
No estoy del todo seguro de cómo hacer aritmética hexadecimal en JavaScript, pero estoy seguro de que puede encontrar un algoritmo en Google.
Aplicando bordes generales
¿Está utilizando un cuadro <div> por separado para su frontera a través de su propiedad de background ? Si es así, deberá aplicar border-radius y sus propiedades específicas del vendedor tanto en el cuadro de borde como en el interno:
<div id="border-box" style="border-radius: 5px;">
<div id="inner-box" style="border-radius: 5px;">
</div>
</div>
Una forma mucho más eficiente sería simplemente que la caja interna manejara su propio borde:
<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
<!-- Content -->
</div>
CSS-wise, podría declarar una clase .rounded-border y aplicarla a cada cuadro que tendrá bordes redondeados:
.rounded-borders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
Y aplique la clase a cualquier recuadro que tenga bordes redondeados:
<div id="border-box" class="rounded-borders">
<div id="inner-box" class="rounded-borders">
</div>
</div>
Para un solo elemento de cuadro, aún se le pedirá que declare el tamaño del borde para que se muestre:
<style type="text/css">
#inner-box { border: 4px solid blue; }
</style>
<div id="inner-box" class="rounded-borders">
</div>