Hoy estamos aprendiendo a usar la tecnología CSS3 para lograr esquinas redondeadas sin necesidad de imágenes. Podemos usar CSS3 para lograr el efecto de esquinas redondeadas del fondo del título de la barra lateral y el efecto de esquinas redondeadas del cuadro de búsqueda. Regístrelo para su uso posterior. W3C ha formulado durante mucho tiempo la propiedad CSS3 que implementa esquinas redondeadas de CSS: border-radius Firefox y Safari también implementan esta función a través de propiedades privadas:
El efecto es el siguiente:
Entre ellos, -moz-border-radius es una propiedad privada utilizada por Firefox para implementar esquinas redondeadas, y -webkit-border-radius es una propiedad privada utilizada por los navegadores principales de Webkit (como Safari y Chrome) para implementar esquinas redondeadas. solo necesita especificar que una determinada esquina esté redondeada. Para los ángulos, todos definen cuatro atributos:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Por supuesto, IE (incluido IE8) todavía no lo admite, por lo que el efecto solo se puede ver en Firefox, Safari y Chrome.