CSS圆角框进行JS封装

2016-02-20 00:23 1 1 收藏

想要天天向上，就要懂得享受学习。图老师为大家推荐CSS圆角框进行JS封装，精彩的内容需要你们用心的阅读。还在等什么快点来看看吧！

【 tulaoshi.com - Web开发】

文章导航：第一章：基本的圆角框 第二章：透明圆角化背景图片 第三章：圆角化图片 第四章：CSS圆角框组件 V1.0

前序：本来前三篇文章已经将CSS圆角框讲解完毕，但从网友反馈中，都说到不好使用，因此有了这篇文章，本文主要是将前面的结果总结修订后进行JS封装，方便调用。

在本次封装中，增加了对真正img标签引用的图片实现圆角化，之前的圆角图片大多是基于背景图片的，因为纯css无法实现img图片的圆角，有了js的加入，就变成可能了。并且在这次封装过程中修正了上次的背景图片下面两个圆角图片的定位错误问题。

其实这个控件的JS代码很简单，只需要用到innerHTML就可以完成其大部分工作，而真正的难点在于对于CSS样式的合并组合使用。

先看看最终效果截图：

图一

在我的《CSS圆角框组件V1.0》中，可以变化出6种基本风格的圆角框（至于颜色风格，则可以说是千变万化了）。它们分别是：

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）纯线框圆角。 标题线框圆角。不带背景色或背景图片，透明。 标题和内容区可分别自定义颜色圆角。 标题背景图片圆角。标题带背景图片时，自动实现圆角。 装饰性背景图片圆角。容器有装饰性背景图片时，自动实现圆角。 Img图片圆角。如果有img标签引用图片时，自动实现圆角。

来源:https://www.tulaoshi.com/n/20160220/1631763.html

上一篇： HTML和CSS中不同的视觉语义
下一篇： CSS网页布局中文排版的9则技巧

看过《CSS圆角框进行JS封装》的人还看了以下文章更多>>

CSS之圆角矩形

标签： Web开发

!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" lang="gb2312" head meta http-equiv="Content-Type" content="text/HTML; charset=gb2312" / titlediv+CSS圆角矩形/title style type="text/CSS" body{padding: 20...

JS新闻无缝滚动封装函数

标签： Web开发

程序代码 script type="text/javascript" !-- //新闻滚动JS代码 (一次滚动高度,速度,停留时间,图层标记) function startmarquee(lh,speed,delay,index){ var t; var p=false; var o=$("gundongnews"+index); o.innerHTML+=o.innerHTML; ...

只用css制作圆角

标签： Web开发

不用图片，只用css制作圆角的另一方法。来自 html div class="curvedBox"spanspan class="r1" /spanspan class="r2" /spanspan class="r3" /spanspan class="r4" /span /spandiv class="content"Flex is a cross-platform development framework for creating rich Internet...

CSS Sprite操作:用CSS处理圆角

标签： Web开发

初步介绍当然，我知道现在有成千上万个关于用CSS处理圆角的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。 CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。看一下演示 ...

使用CSS制作圆角效果

标签： Web开发

Web2.0中，圆角效果是很常见的，以前都是用图片来模仿，现在直接用css就能实现，例子代码如下 Html代码： !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" html head titleUntitled Document/title meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /head style type="text/css" body{...

查看更多精彩>>