首页 > 软件下载 > > 正文

CSS圆角框组件 V1.0

日期:2016-10-07 16:11:02编辑作者:新葡京线上娱乐
文章导航:
 
第一章:基本的圆角框
第二章:透明圆角化背景图片
第三章:圆角化图片
第四章:CSS圆角框组件 V1.0
前序:本来前三篇文章已经将CSS圆角框讲解完毕,但从网友反馈中,都说到不好使用,因此有了这篇文章,本文主要是将前面的结果总结修订后进行JS封装,方便调用。
 
在本次封装中,增加了对真正img标签引用的图片实现圆角化,之前的圆角图片大多是基于背景图片的,因为纯css无法实现img图片的圆角,有了js的加入,就变成可能了。并且在这次封装过程中修正了上次的背景图片下面两个圆角图片的定位错误问题。
 
其实这个控件的JS代码很简单,只需要用到innerHTML就可以完成其大部分工作,而真正的难点在于对于CSS样式的合并组合使用。
 
先看看最终效果截图:
 
 
图一
 
在我的《CSS圆角框组件V1.0》中,可以变化出6种基本风格的圆角框(至于颜色风格,则可以说是千变万化了)。它们分别是:
 
纯线框圆角。
标题线框圆角。不带背景色或背景图片,透明。
标题和内容区可分别自定义颜色圆角。
标题背景图片圆角。标题带背景图片时,自动实现圆角。
装饰性背景图片圆角。容器有装饰性背景图片时,自动实现圆角。
Img图片圆角。如果有img标签引用图片时,自动实现圆角。

相关文章

http://www.it-adv.net/down/201631.html

javascript对话框(弹出层)组件

javascript对话框(弹出层)组件artDialogartDialog是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验 ..

发布日期:2016-10-07 详细>>

http://www.it-adv.net/down/201637.html

搜索引擎优化基础知识PPT

这几天整理了一份《搜索引擎优化》的PPT,同事交流之用。主要内容有:SEO常用术语解释如何让搜索引擎收录网站SEO的目的站点自身内部的优化 ..

发布日期:2016-10-07 详细>>

http://www.it-adv.net/down/201638.html

flash中产品和文字扫光效果的方式

为了突出产品的视觉质感,经常要通过对产品的受光反光效果的表现来表达。产品光的运动也可以反衬产品的相对运动,例如一辆车要在一个高度很 ..

发布日期:2016-10-07 详细>>

http://www.it-adv.net/down/201634.html

CSS 3.0 参考手册 (中文版)

CSS 3 0 参考手册 (中文版)CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息 ..

发布日期:2016-10-07 详细>>

http://www.it-adv.net/down/201632.html

CSS圆角框组件 V1.0

文章导航:第一章:基本的圆角框第二章:透明圆角化背景图片第三章:圆角化图片第四章:CSS圆角框组件 V1 0前序:本来前三篇文章已经将CSS ..

发布日期:2016-10-07 详细>>

网站统计: