is there a way to do it by css and suitable for IE,Firefox?

when the mouse hovers on the text. the white rounded corner appears as the text's background. is there a way to get that by css? and how to slice the rounded corne开发者_如何学编程r background. thank you

You can perform rounded-corner css styling by applying the following attributes:

.rounded-corners :hover{
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

The classic technique is CSS Sliding Doors, but now you can use some CSS 3 magic to get the same effect.

a {
    color: #fff;
}

a:hover {
    color: #222;    
    background: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

Here's a working example at JSBin: http://jsbin.com/acizer

Yes, you'll want to use the :hover selector to make the background appear and disappear, and the border-radius, -moz-border-radius and -webkit-border-radius attributes to make the corners rounded.