JS和css实现圆角框

标题带有背景图片

组件优点:

1. 全面兼容所有浏览器

2. 圆角不需要图片,直接代码生成,省去制图的麻烦。

3. 自适应外框的大小,可广泛应用于布局区块中。

4. 封装难以控制的CSS代码,调用灵活方便。

5. 封装HTML结构,你只需定义你想要的结构,无冗余,更语义化。

组件缺点:

1. 不能定义线框的大小。如果你需要改变线框大小,本组件不适合你。

2. 圆角不够圆滑,如果你对圆角图片的精度要求较高,不宜采用本组件。

3. 线框颜色和背景色不宜采用对比太强烈的颜色,容易看出锯齿。

下面圆角图片是img图片,而非背景图片。

标题带背景色

标题栏的背景色与内容区背景可以定义不同的颜色。这些颜色值都可以直接在CSS中定义。

标题带有背景图片

标题栏也可以在样式表中定义背景图片,这张背景图片自动圆角化。

标题栏透明

你可以只要线框,不加任何颜色和背景图片。


装饰性背景图片
也可以圆角化

来代码整理:我爱模板网

*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。