Today we are learning to use CSS3 technology to achieve rounded corners without the need for images. We can use CSS3 to achieve the rounded corner effect of the sidebar title background and the rounded corner effect of the search box. Record it for later use. W3C has long formulated the CSS3 property that implements CSS rounded corners: border-radius. Firefox and Safari also implement this function through private properties:
<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox and Safari implement rounded corners< /div>
The effect is as follows:
Among them, -moz-border-radius is a private property used by Firefox to implement rounded corners, and -webkit-border-radius is a private property used by webkit core browsers (such as Safari and Chrome) to implement rounded corners. If you only need to specify that a certain corner is rounded, As for angles, they all define four attributes:
-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
Of course, IE (including IE8) still does not support it, so the effect can only be viewed in Firefox, Safari, and Chrome.