码迷,mamicode.com
首页 > Web开发 > 详细

边框圆角化方式(原文链接http://www.cnblogs.com/SJP666/p/4678730.html)

时间:2015-08-04 20:42:02      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:

技术分享
<title>CSS3实现圆角</title>

 <style type="text/css">

 #box

{

   width:200px;

   height:30px;

   background:url("../images/bt_bottom.jpg") no-repeat left bottom; 

} 

#box h1

{

  width:200px; 

  height:20px; 

  text-indent:-9999px; 

  background:url("../images/bt_top.jpg") no-repeat left top; 

}

 /*下面这个是中间平铺的图,如果是纯色的话,可以直接写颜色值,也可以直接在上述box的背景上写上背景颜色*/ 

#box div#content

{ 

width:200px;

 height:200px; 

background:url("../images/bt_bg.jpg") repeat-y;

 }

</style> 

</head> 

<body> 

<div id="box"> 

<h1>标题</h1> 

<div id="content"></div> 

</div> 

</body>

 </html>
技术分享

  第二种方法:如果是使用CSS实现圆角的话,那么目前最简单的方法就是CSS3中的-moz-border-radius、-webkit-border-radius以及border-radius一起使用效果更佳,目前能支持CSS3的浏览器有IE9及以上版本,google chrome10以上版本,firefox4及以上版本。否则的话,只能使用图片来进行实现了,当然也可以使用css2,但是那个太过于麻烦。

下面我给你一个例子,你可以在以上我提到的相应浏览器中进行浏览,那样效果会更好!

技术分享
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3实现圆角</title>
<style type="text/css">

.box

{
  width:200px;
  height:200px;
  background:#09F;
  -moz-border-radius:8px;/*8px是圆角的角度,值越大则圆角效果越明显,如果修改此项,请修改以下两项的值,使之相同*/
  -webkit-border-radius:8px;
  border-radius: 8px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
技术分享

请将以上代码复制粘贴后,保存为html文档即可,然后利用目前最新版的浏览器进行浏览即可看到如下效果:
技术分享

技术分享
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

#sub1
{   
    width:200px;
    height:200px;
    border-radius:15px;
    background-color:#093
}

</style>
</head>

<body>
<div id="parent">
    <div id="sub1"></div>
</div>

</body>
技术分享

技术分享

边框圆角化方式(原文链接http://www.cnblogs.com/SJP666/p/4678730.html)

标签:

原文地址:http://www.cnblogs.com/zyh-club/p/4702971.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
分享档案
周排行
mamicode.com排行更多图片
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!