Super easy-to-use jQuery rounded Corner plug-in Corner quick _ jquery

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.