用javascript和CSS来做模拟网页中图片的圆角效果 [转]

最新推荐文章于 2019-12-16 09:17:16 发布
最新推荐文章于 2019-12-16 09:17:16 发布
阅读量993 收藏
点赞数
分类专栏： 标准点滴 文章标签： javascript css safari internet firefox opera
作者站点链接;
http://pro.html.it/niftycube/
例子:
http://pro.html.it/niftycube/nifty2.html
在做WEB设计的时候,,一般遇见圆角效果都用图片来实现.其实也可以用css+javascript实现
至于直接用圆角图片,,还是用JAVASCRIPT+CSS来模拟圆角效果,,那个更好,个人认为用图片来的简单一点,从代码量和圆角图片大小的对比来说,,也是图片小很多,,不过用JS也有好处,,就是不会PS的人可以偷懒,还有写成通用的类,可以随时引用
有兴趣的人可以从这个效果的JS和CSS,学到不少东西
作者说;:
Now, Nifty Corners are fully supported also in Internet Explorer 5.5, covering a very wide range of modern browsers: the examples that we'll see in this article have been successfully tested in IE6, IE5.5, Opera 7.6, Firefox 1.0 and Safari 1.1.

另外一个我觉得也比较BT的JS+CSS模拟效果

http://www.webreference.com/programming/css_borders/examples/krazy.htm
chyf1982
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现图片改成圆角效果
02-27
这是用JS把图片原来的样子改成圆角来显示的效果，并不改变图片原来样式，只改变图片的视角效果
js给图片加圆角
djt的专栏
08-28 1570
下载地址：http://www.netzgesta.de/corner/corner.zipjava开源大全：http://www.open-open.com/ http://www.open-open.com/open190025.htm
前端学习（121）：css圆角
歌谣的博客
12-16 304
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js实现div、图片圆角效果
08-09
超简单实用JS实现DIV、图片圆角效果 <!--[if lte IE 9]> <script type="text/javascript" src="DD_roundies_0.0.2a.js"></script> <script type="text/javascript"> DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true); DD_roundies.addRule('.websjy2,.websjy', '5px', true); DD_roundies.addRule('.websjy3', '200px', true); DD_roundies.addRule('.websjy4', '5px 5px 0 0', true); DD_roundies.addRule('.websjy div', '8px', true); </script> <![endif]--> <style> /*圆角处理 IE9以上及其它浏览器 */ .websjy div{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;} .websjy1{-moz-border-radius:5px 20px 3px 10px;-webkit-border-radius:5px 20px 3px 10px;border-radius:5px 20px 3px 10px;} .websjy,.websjy2{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} .websjy3{-moz-border-radius:200px;-webkit-border-radius:200px;border-radius:200px;} .websjy4{-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;} </style> <div style="border:1px solid #0099CC; width:200px; height:200px; background:#99FFFF; margin-bottom:10px;padding:20px; font-size:12px;" class="websjy1">DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true);</div> <h3>效果2：小圆角</h3>
JS实现DIV、图片圆角效果
03-27
桌面\超简单实用JS实现DIV、图片圆角效果，关键是很兼容简单,分享下。
Javascript经典封装集合（22个）
12-02
CSS圆角边框 DynamicLoad Flash图片容器 SwfObject TAB選項卡 侧栏式折叠菜单 代码自动高亮 弹出对话框 多样化的垂直菜单 多样化的连结提示效果 多样化摺叠菜单 酷似flash效果的图片展示 模拟视窗 让ie6支援png图档 ...
60个超实用JavaScript网页特效收集（珍藏版）
08-07
鼠标滑过才出现的工具条，自动二级菜单 无色，淘宝商品展示橱窗，美化列表，公告滚动文字，简体字繁体字转换，锁定列表，荧光效果，信息滚动，用层模拟可移动的小窗口，自动获得文件名，图片透明渐变做的表格，来访...
javascript jscroll模拟html元素滚动条
10-27
里是自己在工作不太忙的时候写出来了一个用户可以自定义的滚动条jscroll，以下简称jscroll。jscroll默认只提供一种滚动条样式，部分样式来自google webstore ，其中有部分css3样式主要用于实现圆角，阴影效果
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越火线游戏网 8.JS经典3款风格QQ客服在线浮动右侧与左侧...
JS仿ios按触效果
12-01
图片文件请先粘贴在你的images文件夹下，样式脚本你可以单独引入，但更推荐把样式插入到你的通用样式文件中(注意背景图片的地址要正确)，把脚本全选复制到通用脚本中。 加上相应的class second 给按钮加上相应的...
Javascript 图片圆角
05-27
Javascript 图片圆角效果，多种效果，如阴影等等
在Web前端页面实现圆角效果，CSS3帮你轻松实现
gonggz的博客
11-09 4173
CSS3 使用border-radius属性设置圆角效果该属性可以通过设置图片或块级元素四个角的圆角半径像素数来实现该效果。W3C规定该属性的可能取值为：none，默认值，表示元素没有圆角效果length，由浮点数字和单位标识组成的长度值%，由百分比设置的圆角值该属性可以分别设置元素的四个圆角效果，采用下列格式来实现。格式：border-radius: 左上角 右上角 右下角 左下角;通常，四个方...
非常简单的jQuery实现网页图片圆角
萧若寒
03-27 1525
W3C很早就已经在CSS 3 中加入了圆角属性border-radius，但是由于某些流行浏览器的不支持，使得其还是没能被广泛使用，所以我们会想尽办法去进行更好的补充，包括背景图片的圆角实现、js圆角实现等等。但是这些方法在实现的过程中，总是会增加很多无谓的工作任务，而且还有可能无法做到浏览器之间的兼容性，那么就介绍一个非常简单的jQuery圆角实现效果吧，说是圆角有点小看它了，因为它可以实现的不
Canvas实现圆角图片实例页面
hxf0663的专栏
03-12 3107
HTML代码：&lt;strong&gt;这是原图&lt;/strong&gt; &lt;p&gt;&lt;img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" width="256" height="191"&gt;&lt;/p&gt; &lt;strong&gt;这是Canv
css实现圆角效果
一步一步学习javascript;关注web标准
03-31 6559
很久之前弄的一个效果了，今天又把它找了出来。实现这个效果,我感觉更多的是一种投机取巧的东西.当然这个是没有图片的方便.这是css代码:#circle{ margin:50px auto; width:300px; overflow:hidden; }.include{ background:transparent; }.s1,.s2,.s3,.s
js语法5---canvas圆角图片
安卓笔记
05-06 5094
Title canvas to draw window.onload=function () { var drawing = document.getElementById('drawing'); if (drawing.getContext) { print('suppo
js简单实现div圆角
qinglangee的专栏
02-02 2347
原文 [url]http://www.w3pop.com/comm/view/id/311/[/url] 这个程序是个用来制作DIV圆角的开源javascript代码实现,效果和图像制作圆角一样的.它简单,易用,不用修改任何图像就能做到不同半径圆角.... 用这个代码你可以自由定制自己的DIV,不再是方形了.完全可以实现圆形个性DIV 用法说明: 以下说明将以一个半径为20像...
fabric.js图片圆角方法（测试）
rentian1的博客
12-01 3779
一种：缩放图片尺寸，外面贴图圆角，需要图片颜色和圆矩颜色一致，不然图片还是方形的 var rect = new fabric.Rect({ left:0, top:0, fill: 'white', or
javascript圆角
最新发布
10-22
比如可以使用box-shadow属性来模拟圆角效果，或者使用CSS3的border-radius属性来设置圆角。在Firefox浏览器中，还可以使用outline-radius属性来设置文本框的圆角。总之，通过JavaScript和CSS的结合，可以实现各种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值