非常简单的jQuery实现网页图片圆角

2016-02-20 01:03 16 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的非常简单的jQuery实现网页图片圆角,希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发 】

W3C很早就已经在CSS 3 中加入了圆角属性,但是由于某些流行浏览器的不支持,使得其还是没能被广泛使用,所以我们会想尽办法去进行更好的补充,包括背景图片的圆角实现、js圆角实现等等。但是这些方法在实现的过程中,总是会增加很多无谓的工作任务,而且还有可能无法做到浏览器之间的兼容性,那么就介绍一个非常简单的jQuery圆角实现效果吧,说是圆角有点小看它了,因为它可以实现的不止是圆角,看这张图就知道了。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

非常简单的jQuery实现网页图片圆角-网页教学网

使用jQuery圆角插件 来解决这个问题,一个代码就足够了:

$('.round').corner("10px");

同样实现一个带边框的圆角效果:

$('div.rounded_box').wrap(' ');$('div.rounded_box').corner("round 8px").parent().css('padding', '2px').corner("round 10px");

足够简单了吧.

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

jQuery圆角插件演示

jQuery圆角插件官方:

来源:http://www.tulaoshi.com/n/20160220/1633170.html

延伸阅读
标签: Web开发
前台: upload.htm 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head runat="server" titleupload/title link href="upload.css" rel="Stylesheet" / /head body form ul li button id="S...
标签: Web开发
其实我本来的计划是做网页设计师的,可是没有人认为我设计的好,哥到现在还没有工作,发泄一下,不多说了。 效果图 需要用到的图片: 背景图片: 进度显示图片: 网页结构: 代码如下: div div/div divdiv/div/div /div css代码: 代码 代码如下: #center{ margin:50px auto; width:400px; } #loading{ wid...
标签: PHP
  //文件上传。Linux+apache+php3/4测试通过。iis测试未通过,win+apache+php未测试   <?php   if ($HTTP_POST_VARS["upload"]=="上传"){   file://这里你可以加上检查文件名,格式,图片尺寸等功能,   file://$picurl 本地系统的全路径   file://$picurl_nam...
标签: Web开发
减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jquery的实现这种效果的插件:jquery.lazyload,一个很不错的插件。 比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片。 如果你是图片网站,而且...
标签: Web开发
html head titlejquery练习——简单的图片结果展示效果--cnblogs libsource//title style #cfoot ul,#cfoot li{ margin:0;padding:0;list-style-type:none; } #cdiv{ width:500px;height:500px;line-height:500px;text-align:center;border:1px solid #D5DDF9;margin:30px;float:left; } #cfoot li{ display:inline-block;width:100px;height:1...

经验教程

761

收藏

57
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部