CSS Jquery implementation of page rounded box method list_jquery
所以我就想用一个既方便调用又方便更新的方法来实现，结果如愿以偿。先将此技术点总结如下：
在此之前我也寻找过目前网络上最流行的做法的实现方案，大体共总结出7种方法，但是发现他们的方法多多少少都存在缺陷，后来我自己做出了我自己觉得满意的方法。
先看目前网络上最流行的7种做法：
１，无图片纯css圆角框
收录理由：兼容性强，不用图形
图一
特点：
1.不用任何图形，使用很多个div容器模拟出圆角效果。
2.兼容性：通杀所有浏览器
缺点：
1.构造这个圆角需要加入太多的无语义的标签，结构比较冗余。
2.重用性不强：如果一个页面有多个圆角，并且要实现不同的半径大小，则其灵活性不够。
3.边框颜色虽然可以调节，但会对页面中的结构产生致命的影响，适用于色彩单一并且一个页面中圆角应用不多的页面。
4.不容易实现圆弧内有渐变色的图形背景。
5.圆角框不够圆滑，有锯齿现象，适合于背景色和当前色色差不大并且圆弧较小的网页。
实现原理：
用很多1像素高的div容器，利用背景色和边框色来模拟出圆角框的轮廓线。
实例演示： http://www.cssplay.co.uk/boxes/snazzy.html
２，无图片纯css圆角框，用特殊字符（&bull）
收录理由：圆滑，不用图形
图二
特点：
1.不用任何图形，使用特殊字符•（圆点）模拟出圆角。
2.兼容性：通杀所有浏览器
3.圆角平滑
缺点：
1.构造这个圆角一样需要加入无语义的标签，结构冗余，同第一种一样。
2.重用性不强：如果一个页面有多个圆角，并且要实现不同的半径大小，需要调整四个角图片的定位，并且字符大小对其有影响，灵活性不够。
3.颜色虽可调节，但要求里面的背景色和字符的颜色相同，不能做成边框线条。适用于色彩单一并且一个页面中圆角不是太多的页面。
4.一样不容易实现圆弧内有渐变色的图形背景。
实现原理：
用特殊字符（&bull），利用定位，截取四分之一圆模拟出圆角框的一个角图片。
实例演示：http://www.cssplay.co.uk/boxes/curves.html
３，图片圆角框
收录理由：兼容性强，可以表现很复杂的圆角效果。
图三
特点：
1.使用四个圆角图形（或一个圆图片）。
2.兼容性：通杀所有浏览器。
3.这是最常用的圆角框做法。
4.因为采用图片来表现，所以其圆角是超级平滑，无任何锯齿现象。
5.表现丰富，适用于各种对图片表现要求较高的圆角框。
缺点：
1.构造这个圆角也需要加入四个标签来装四张角图片，结构也有冗余。
2.重用性不强：如果一个页面有多个圆角，并且要实现不同的半径大小，则要重新制作一套圆角图片。
3.如果对结构的冗余没有特别的需求，这就是超级圆滑圆角框的解决方案了。
实现原理：
利用九宫格原理，在一个容器的四个角加入绝对定位（或相对定位）的四张圆角图片。
实例演示：http://www.cssplay.co.uk/boxes/three_cornered.html
４，利用VML绘制圆角（ie only）
收录理由：无图片，平滑，可加阴影边框
图四
特点：
1.不用任何图形。
2.兼容性：只能在IE中使用
3.圆角半径随意调整
4.重用性强：多个圆角任意调用。
5.圆角颜色随意设置。
6.结构无冗余。
7.圆角平滑无锯齿。
缺点：
1.除了兼容性 有问题外，其它方面的表现都不错。
2.不能在圆弧中表现丰富的有渐变的图片，因为圆弧外框是透明的。
实现原理：使用IE专用的VML来画出圆角。
id=”roundbox” class=”circle” strokecolor=”red” strokeweight=”2px” arcsize=”0.08″> 注意加入引用空间： 这是兼容的用法，xmlns:v一定不能少，否则。。。 样式表中加入这一句话： v”:*{behavior:url(#default#VML);display:inline-block;} Arcsize为半径 Strokeweight为边框线宽度 Strokecolor为边框线的颜色 实例演示：（请在IE系列浏览器下查看本实例） 使用IE专用的VML来画平滑圆角框，还可以画出阴影效果。就其图形表现来说，是非常完美的。 收录理由：平滑无锯齿 图五 特点： 1.不用任何图形。 2.兼容性：只能在FF3中使用，其它浏览器不受支持。 3.圆角半径随意调整 4.重用性强：多个圆角任意调用，只需要样式表设置就可以。 5.圆角颜色随意设置。 6.结构无冗余。 7.圆角平滑无锯齿。 缺点： 1.除了兼容性 有问题外，其它方面的表现都不错，这种方式应该是最完美的方式，可惜目前只有FF3能支持这个属性，以后CSS3后会支持这个属性，不过这不知道要等到多少年以后。 2.同第五种圆角一样，在处理圆弧内的图片背景时显得有些有心无力。 实现原理： 使用FF3专用的私有属性来画出圆角。 只用两种属性就能体现圆滑的圆角框 -moz-border-radius:10px; Border:5px red solid; 实例演示：（请在FF3浏览器下观看，其它浏览器不支持） FF3下的圆角框两个属性就可以解决: -moz-border-radius：半径 border：边框 这种方案目前应该是比较完美的方案了。 图六 特点： 1.不用任何图形。 2.兼容性：通杀所有浏览器 3.圆角半径随意调整 4.重用性强：多个圆角任意调用。 5.颜色随意设置，并且可以使用复杂的图片做为背景，表现丰富。 6.结构无冗余，只需要在容器上定义一个class或ID就可以将这个div变成圆角。 7.圆角平滑。 缺点： 1.客户端禁用JS时就无圆角，不过在目前情势下，这种情况应该不会成为太大的问题。 实例演示：http://www.curvycorners.net/examples.php（有三个演示例子） 增补一种方案，结合jquery/vml/canvas的无图片圆角框。 图七 特点： 结语：目前的css因为不能为一个容器中定义多张背景图片，造成了为了这种圆角效果而加入冗余标签。听说CSS3会引入这一属性，可能到哪时，就是 圆角框统一的时候了。另外也听说在CSS3中有意向加入像FF3私有属性（-moz-border-radius）的方法，这也可以完美地解决这个问题。 但在目前的情势下，可能也只有用上面的这些方法来过渡了，强烈期待CSS3的到来。 In short: It is basically impossible to achieve an absolutely perfect rounded corner frame under the current situation, so it is named "semi-perfect solution". -------------------------------------------------- -------------------------------------------------- -------------------------------- My solution: CSS Jquery rounded corner image with four corners Step one: Go to the website http://jquery.com/ to download the jquery-1.3.2.min.js file, which will be referenced in the entire project. VML画平滑圆角
５，利用私有属性绘制圆角（FF3 only）
FF3私有属性画的圆角框
６，无图片脚本圆角框（js半完美解决方案）
７，无图片vml/canvas结合的圆角框
1.不用任何图形。
2.兼容性：通杀所有浏览器
3.圆角半径随意调整,并且四个角可以随意设置要不要圆角。
4.重用性强：多个圆角任意调用。
5.颜色随意设置，并且可以使用复杂的图片做为背景，表现丰富。
6.结构无冗余，只需要在容器上定义一个class或ID就可以了。
7.圆角平滑。
缺点：
1.本圆角需要用到jquery库，和一个JS文件，如果在您的项目中已经用到了Jquery这个库，倒还可以用得上，不然，为一个圆角加载一两个JS文件有点得不偿失。
2.圆角在不同的浏览器下显示有点小小的问题.
实例演示：http://labs.parkerfox.co.uk/cornerz/
About will be added to the page
Source code:
JS code:
< ;script type="text/JavaScript">
$(".corner").prepend("
$(".corner").after("
Generated HTML code:
Step 3: Edit the CSS style to achieve the rounded corners you want.
Summary: As long as the source code of the DIV block with rounded corners is class="corner", by calling the JS code, you can generate the div tag that you want to have a rounded background with. No need Add those codes manually every time you make a rounded corner block, which makes the work simple and the source files clear and concise, making it convenient for developers and UI personnel.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1390
52
Detailed explanation of jQuery reference methods: Quick start guide
Feb 27, 2024 pm 06:45 PM
Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
In-depth analysis: jQuery's advantages and disadvantages
Feb 27, 2024 pm 05:18 PM
jQuery is a fast, small, feature-rich JavaScript library widely used in front-end development. Since its release in 2006, jQuery has become one of the tools of choice for many developers, but in practical applications, it also has some advantages and disadvantages. This article will deeply analyze the advantages and disadvantages of jQuery and illustrate it with specific code examples. Advantages: 1. Concise syntax jQuery's syntax design is concise and clear, which can greatly improve the readability and writing efficiency of the code. for example,
How to remove the height attribute of an element with jQuery?
Feb 28, 2024 am 08:39 AM
How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
Use jQuery to modify the text content of all a tags
Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
Understand the role and application scenarios of eq in jQuery
Feb 28, 2024 pm 01:15 PM
jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s
How to tell if a jQuery element has a specific attribute?
Feb 29, 2024 am 09:03 AM
How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute
