下面是第二种圆角样式设计,常用于段落文字或块区域的四周圆角:
<div id="c">
<div class="top"><b class="topl"></b><b class="topr"></b></div>
<div id="content">内容区
</div>
<div class="foot"><b class="mbcl"></b><b class="mbcr"></b></div>
</div>
下面是对应的样式:
#c{width:200px;text-align:center;margin:0 auto;background-color:#dbdbdb;}
.top, .foot{height:6px;overflow:hidden;background-color:#dbdbdb;}
.topl, .footl, .topr, .footr{float:left;width:6px;height:6px;background:url(/img/cor.png) no-repeat;}
.topl{background-position:0 0;}
.topr, .footr{float:right;}
.topr{background-position:-6px 0;}
.footl{background-position:0 -6px;}
.footr{background-position:-6px -6px;}
#content{width:188px;height:100px;background:#fff;}
效果图如下:
ps:附件cor.png是圆角需要的图片。
- 大小: 4.2 KB
- 大小: 3.8 KB
分享到:
相关推荐
原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。 二、使用布局技术 使用CSS3 圆角技术实现。 使用CSS3样式单词:border-radius 语法: div{border-radius:5px} 对图片设置...
《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要: 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计...
本书是一本CSS技术专著,主要从布局这个角度全面、系统和深入地讲解CSS在标准网站布局之中的应用。很多读者经过初步的学习之后就能够使用CSS设计出一些漂亮的网页样式,于是便乐在其中,踌躇满志,这是好事,但千万...
CSS与(X)HTML核心基础(中) CSS与(X)HTML核心基础(下) CSS禅意花园介绍 深入CSS盒子模型 深入理解盒子模型(上) 深入理解盒子模型(下) 浮动与定位(上) 浮动与定位(下) 文字与图像(上) 文字与图像(下) ...
javascript+css无图片圆角效果 告别复杂的图片圆角布局,调用简单 效果漂亮,样式可灵活调整!
草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例...
CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和...
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例...
之后本书又着重讨论如何使用DIV结合CSS来搭建网站,同时也介绍了CSS在Dreamweaver中的应用。并且对于在CSS制作过程中遇到的Bug进行了详细的分析。 本书适合初、中级网页设计爱好者阅读参考。 第1篇 新手上路 第1章 ...
针对美食静态网页设计项目,...7. 图片和文本内容:根据项目需求,添加美食相关的图片和文本内容,可以使用CSS设置图片的样式(如大小、边框、圆角等)和文本的样式(如字体、对齐方式、行高等)。 8. 样式细节设计:
内容涵盖css样式问题, 基础选择器:标签选择器、类选择器、id选择器、通配符选择器; 文本字体样式介绍:大小、样式、属性、风格、颜色等; 选择器进阶:复合选择器、并集选择器、交集选择器 、hover伪类选择器; ...
草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例...
草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去。 而这本的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作...
第2课 CSS禅意花园介绍 深入CSS盒子模型 第3课 深入理解盒子模型(上) 第3课 深入理解盒子模型(下) 第4课 浮动与定位(上) 第4课 浮动与定位(下) 第5课 文字与图像(上) 第5课 文字与图像(下) CSS导航设计 ...
源文件\09 round.html ----第8章中的css圆角。 源文件\10 博客实例,参照本书4-9章中的相关讲解。 源文件\11 英文站点实例,与书中第12章内容保持一致。 源文件\12 中文站点实例,与书中第13章内容保持一致。 -...
style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章(源代码\第16章) 示例描述:本章演示字体属性用法。 间距与间隔.html 属性间距与间隔用法。 设置行距....