jQuery Corner is a jQuery plug-in, originally developed by Dave Methvin, but with the assistance of Comrade Malsup, some important improvements were made. The project is now on github. Of course, for convenience, this article will provide the plug-in as an attachment, but if you want to get the latest version, please go to the project's github.
The reason why rounded corners and other styles appear like magic is because the plug-in adds some small strips to the target element. These small strips are the background color, so the human eye only sees rounded corners, but they are actually small. Something covers up the original right angle.
It seems that I am really not a magician. I exposed my background as soon as I got started. Don’t worry, let me add some requirements for this magic:
1. The plug-in is specially written for block elements, so div, p, etc. are applicable; while inline elements are not so lucky. Of course, it does not mean that inline cannot be used at all, but it is more expensive to add corners to span. god. However, normal people would not argue with the rounded corners of span, so just change span to div.
2. Regarding the border-radius function newly added by the plug-in, IE<=8 does not support it, but all browsers except IE support it. Damn it, let’s deeply despise the current situation of IE6 flooding in our country.
OK, the basic points have been introduced. Teach everyone how to use it, this is the key point, but it is very simple. The first step is to build a basic HTML web page, DIV layout, and CSS.
<html> <head> <style type="text/css"> div{ width:350px; height:200px; background-color: #6af; } </style> </head> <body> <div></div> </body>