CSS圆角框进行JS封装

zhuofengduan

zhuofengduan

2016-02-20 00:23

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)文章导航:第一章:基本的圆角框 第二章:透明圆角化背景图片 第三章:圆角化图片 第四章:CSS圆角框组件 V1.0

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

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

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

先看看最终效果截图:

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

图一

在我的CSS圆角框组件V1.0中,可以变化出6种基本风格的圆角框(至于颜色风格,则可以说是千变万化了)。它们分别是:

纯线框圆角。 标题线框圆角。不带背景色或背景图片,透明。 标题和内容区可分别自定义颜色圆角标题背景图片圆角。标题带背景图片时,自动实现圆角。 装饰性背景图片圆角。容器有装饰性背景图片时,自动实现圆角。 Img图片圆角。如果有img标签引用图片时,自动实现圆角。

展开更多 50%)
分享

猜你喜欢

CSS圆角框进行JS封装

Web开发
CSS圆角框进行JS封装

CSS创建圆角框

Web开发
CSS创建圆角框

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS实现绝对的完美圆角框

Web开发
CSS实现绝对的完美圆角框

用js实现CSS圆角生成更新

Web开发
用js实现CSS圆角生成更新

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS实例教程:纯CSS实现圆角框

Web开发
CSS实例教程:纯CSS实现圆角框

用js实现的抽象CSS圆角效果!!

Web开发
用js实现的抽象CSS圆角效果!!

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

HTML和CSS中不同的视觉语义

HTML和CSS中不同的视觉语义

CSS网页布局中文排版的9则技巧

CSS网页布局中文排版的9则技巧
下拉加载更多内容 ↓