如何用CSS制作圆角框效果
如何用CSS制作圆角框效果,《CSS圆角框组件V1.0》,可以变化出6种基本风格的圆角框:纯线框圆角、标题线框圆角、标题和内容区可分别自定义颜色圆角、标题背景图片圆角、装饰性背景图片圆角、Img图片圆角。用CSS制作圆角框效果,先看看最终效果截图:
如何用CSS制作圆角框效果,《CSS圆角框组件V1.0》,可以变化出6种基本风格的圆角框,至于颜色风格,则可以说是千变万化。它们分别是:
1. 纯线框圆角。
2. 标题线框圆角。不带背景色或背景图片,透明。
3. 标题和内容区可分别自定义颜色圆角。
4. 标题背景图片圆角。标题带背景图片时,自动实现圆角。
5. 装饰性背景图片圆角。容器有装饰性背景图片时,自动实现圆角。
6. Img图片圆角。如果有img标签引用图片时,自动实现圆角。
第一种:纯线框圆角
如何用CSS制作圆角框效果,这是最基本,也是应用最广泛的一种应用,只需一句话就可以了。
Js行为:
解释:四个参数,分别代表样式名称、边框色值、背景色值、风格参数。
Html结构:
第二种:标题线框圆角
如何用CSS制作圆角框效果,一般这种块状布局,都需要在页头加入标题,你可以使用h1~h6系列标签。
Js行为:
解释:五个参数,分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称,因为考虑了扩展性,当想使用其它的标签时,可以随时替换,如h1~h6系列标签。
Html结构:
<h3>标题</h3>
<div>内容</div>
</div>
第三种:标题和内容区可分别自定义颜色圆角
如何用CSS制作圆角框效果,与第二种风格差不多,差别在于可以分别定义标题和内容区的颜色值。
Js行为:
解释:六个参数,分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值。
Html结构:
<h3>标题</h3>
<div>内容</div>
</div>
第四种:标题背景图片圆角
如何用CSS制作圆角框效果,这种需要将标题的背景图片路径作为参数传入,有了背景图片,一般都不需要背景颜色了,所以将第六个参数值设为空:
Js行为:
解释:七个参数,分别代表样式名称、边框色值、背景色值、风格参数、标题标签名称、标题背景色值、标题背景图片路径。
Html结构:
<h3>标题</h3>
<div>内容</div>
</div>
第五种:装饰性背景图片圆角
如何用CSS制作圆角框效果,这种圆角也是用得比较多的,这种风格要注意:在CSS中需要设置容器的宽高值,因为在js中会查找到这个图片的宽高值。
Js行为:
解释:四个参数,分别代表样式名称、边框色值、背景色值、风格参数。背景色值和背景图片只选其一,所以将第三个参数置为空。
Html结构:
第六种:Img图片圆角
如何用CSS制作圆角框效果,纯CSS方法是无法做到Img图片圆角的,但有JS的加入,就可以变相实现。原理和第五种相似,只是将这个Img的图片路径取出来,在js中以背景图片的方式加入到各个容器中去,然后再还原img标签。
Js行为:
解释:四个参数,分别代表样式名称、边框色值、背景色值、风格参数。
Html结构:
最简洁的HTML结构,无冗余代码。
<a href="http://binyong.cnblogs.com/" title="漂亮女孩1" target="_blank">
<img src="image/girl-1.jpg" height="115" width="154" alt="漂亮女孩1"/>
</a>
</div>
如何用CSS制作圆角框效果,组件优点:
1. 全面兼容所有浏览器。
2. 圆角不需要图片,直接代码生成,省去制图的麻烦。
3. 自适应外框的大小,可广泛应用于布局区块中。
4. 封装难以控制的CSS代码,调用灵活方便。
5. 封装HTML结构,你只需定义你想要的结构,无冗余,更语义化。
如何用CSS制作圆角框效果,组件缺点:
1. 不能定义线框的大小。如果你需要改变线框大小,本组件不适合。
2. 圆角不够圆滑,如果你对圆角图片的精度要求较高,不宜采用本组件。
3. 线框颜色和背景色不宜采用对比太强烈的颜色,容易看出锯齿。