Although the rounded corner page looks nice, it has never been quite easy to implement. On the one hand, there is no CSS3, and on the other hand, you have to cut out the corner through an artist. But these troubles are coming soon, because of the appearance of jQueryCorner! JQuery Corner is a jQuery plug-in, initially developed by Dave Methvin, but with the assistance of Comrade Malsup, it has made some important improvements. Now the project is on github. For convenience, this article will provide the plug-in the form of attachments, but if you want to get the latest version, please go to github of the project.
The reason for displaying rounded corners and other styles like magic is that the plug-in adds some small blocks to the target element. These small blocks are the background color, so the human eyes only see rounded corners, in fact, it is a small thing that hides the original right angle.
It seems that I am not a magician, and I will reveal the old back first. Don't worry. Let me add some requirements for this magic:
1. The plug-in is designed for block elements, so p and p are applicable. The inline elements are not so lucky. Of course they do not mean that inline cannot be used at all, it only takes more trouble to add a corner for span. However, normal people won't compete with the rounded corner of span. Change span to p.
2. For the border-radius function added by the plug-in, IE <= 8 is not supported by all browsers except IE. Niang, and then despise the situation of the Internet Explorer 6 flood in her country.
OK. The basic points are described. This is the focus, but it is very simple. Step 1: Construct the basic HTML webpage and DIV layout and CSS.
The effect is as follows:
Step 2: Introduce jQuery and jQuery Corner plug-ins.