0元购京东自营斐讯K2路由器返399元活动
置顶

利用一个圆形来制作边框圆角

作者:     目录: 小代码 & 网页设计 & 酷站赏析     发表: 2009年12月19日

圆角是常用的设计元素之一,但HTML元素都是以方形的形式存在,但是通过给这些元素设置背景图片,就能创建圆角效果。

圆角越灵活,则对应的CSS代码就越复杂,我们的目标是利用最小的图片最少的代码实现圆角效果。

制作圆角效果步骤:

  1. 圆角的灵活性。例如可否横向、纵向延伸。
  2. 需要哪些HTML元素。
  3. 制作圆角图片。
  4. 编写CSS代码。

虽然制作圆角的方法有很多,但这里介绍一个我自己想出来的方法 —— 利用一个圆形来制作边框圆角

这个方法的好处是只需要一个圆形图片,然后对所需要的HTML元素进行样式定义。

我们这里用的圆角图片是一个右侧所示的圆形图片。圆角图片:bg 。

利用一个圆形来制作边框圆角效果预览:

adding-rounded-corners-use-a-circle-preview 

 

制作过程:

  1. 利用绘图软件绘制一个20×20的带有边框的圆角。
    bg
  2. 合理选用HTML元素,并确定这些元素所在的位置及大小。
    HTML元素示意图
    adding-rounded-corners-use-a-circle-positionHTML代码:

    <div class="gray-box">
    <span class="top-left"></span>
    <h4>制作边框圆角</h4>
    <span class="top-right"></span>
    <p>圆角是常用的设计元素之一,但HTML元素都是以方形的形式存在。<br />
      <a href="http://renniaofei.com">任鸟飞网页设计</a></p>
    <span class="bottom-left"></span>
    <span class="more"><a href="http://renniaofei.com">更多资料</a></span>
    <span class="bottom-right"></span></div>
  3. 对上面的HTML元素进行样式定义。CSS代码:
    .gray-box {
    	width: 300px;
    	position: relative;
    	height: 200px;
    }
    .gray-box .top-left {
    	background-image: url(bg.gif);
    	background-repeat: no-repeat;
    	background-position: left top;
    	height: 10px;
    	width: 10px;
    	display: block;
    	position: absolute;
    	left: 0px;
    	top: 0px;
    }
    .gray-box h4 {
    	width: 280px;
    	display: block;
    	position: absolute;
    	left: 10px;
    	top: 0px;
    	border-top: solid 1px #ccc;
    	height: 20px;
    	background-color: #eee;
    	z-index: 999;
    	padding-top: 5px;
    	color: #003366;
    }
    .gray-box .top-right {
    	background-image: url(bg.gif);
    	background-repeat: no-repeat;
    	background-position: right top;
    	height: 10px;
    	width: 10px;
    	display: block;
    	position: absolute;
    	top: 0px;
    	right: 0px;
    }
    .gray-box .bottom-left {
    	background-image: url(bg.gif);
    	background-repeat: no-repeat;
    	background-position: left bottom;
    	height: 10px;
    	width: 10px;
    	display: block;
    	position: absolute;
    	left: 0px;
    	bottom: 0px;
    }
    .gray-box .bottom-right {
    	background-image: url(bg.gif);
    	background-repeat: no-repeat;
    	background-position: right bottom;
    	height: 10px;
    	width: 10px;
    	display: block;
    	position: absolute;
    	right: 0px;
    	bottom: 0px;
    }
    .gray-box .more {
    	width: 280px;
    	position: absolute;
    	right: 10px;
    	bottom: 0px;
    	display: block;
    	background-color: #EEEEEE;
    	border-bottom: solid 1px #ccc;
    	text-align: right;
    	padding-bottom: 8px;
    }
    .gray-box p {
    	position: absolute;
    	top: 10px;
    	background-color: #EEEEEE;
    	border-right: solid 1px #ccc;
    	border-left: solid 1px #ccc;
    	width: 278px;
    	height: 140px;
    	padding: 20px 10px;
    }

 
利用一个圆形来制作边框圆角效果 —— 预览
利用一个圆形来制作边框圆角效果 —— 下载

标签: .

发表评论

电子邮件地址不会被公开。 必填项已用*标注