me gustaría el estilo de un <ul> para mostrar todos los artículos en una caja con esquinas redondeadas (véase más adelante):Estilo lista desordenada para mostrar los elementos de la lista en la caja esquina redondeada
¿Es posible utilizar CSS y solo el <ul> (sin <div>s y tablas adicionales), ya que voy a usarlo en un sistema CMS para dar estilo a todos los <ul> s creados por el usuario?
que era capaz de recrear su imagen utilizando la siguiente (X) HTML y CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>UL Corners</title>
<style type="text/css">
ul {
background-color: #EBEBEB;
list-style-image: url(arrow.png);
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
padding: 15px;
width: 410px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
li {
margin: 10px;
margin-left: 25px;
}
</style>
</head>
<body>
<ul>
<li>
Functional DR (Disaster Recovery)
</li>
<li>
Virtual off site contact centre management
</li>
<li>
Technology, Connectivity, Process and Resource Management in disaster recovery site
</li>
<li>
Mission Critical Response Service Level Agreements and Logistical management
</li>
</ul>
</body>
</html>
El resultado final es el siguiente:
screenshot http://img19.imageshack.us/img19/2194/screenshotdzn.png
Pero sólo funciona en Firefox , Chrome, Safari y cualquier navegador compatible con CSS3. Que lamentablemente excluye IE.
Aquí es un buen ejemplo de las esquinas redondeadas usando CSS 3: CSS3 Rounded corners
esto sólo funcionará en Firefox y Safari sin embargo.
Utilizando solo la etiqueta UL, no conozco una solución pura de CSS 2 para bloques de altura variable (para altura fija: tiene la técnica de puertas correderas).
Es posible que desee ver una solución JS + CSS: nifty corners.
Eche un vistazo a jQuery Corner para una solución de curvas más redondeada ;-) Incluye JS y CSS, pero tiene una gran flexibilidad lista para usar.
jQuery Corner no funciona para IE – Yosef
Si se puede etiquetar el último li, se puede poner en las esquinas inferiores que - My rounded corner list.
ul {background:transparent url(rc_top.jpg) 0 0 no-repeat;width:459px;padding:20px 0 0 0;}
ul li {background-color:#ebebeb;padding-left: 40px;}
ul li.last {background:transparent url(rc_bot.jpg) 0 bottom no-repeat;padding-bottom:20px;}
<ul>
<li>one</li>
<li>two</li>
<li class="last">three</li>
</ul>
Si IE6 y 7 no son una preocupación, se puede utilizar en lugar de ul li:last-childul li.last.
https://jsfiddle.net/1u3nma6t/ en caso de que otros necesiten verlo en vivo. – Si8