CSS3的border-radius
利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DIV+CSS的圆角边框,一种是利用CSS3,一种是利用布局模拟出圆角。
先说第一种,利用CSS3,前提是您的浏览器必须支持CSS3,Firefox3是支持的,我看到的很多网站圆角也是利用CSS3直接生成的,无非就是ie下依然显示直角而已,让ie固执去吧。

利用CSS3,你可以指定4个角都是圆角,或者某一个角是圆角非常方便,代码如下:

CSS Code复制内容到剪贴板
  1. #round {     
  2.     background-color: #000;     
  3.     border: 1px solid #000;     
  4.     -moz-border-radius: 10px;     
  5.     -webkit-border-radius: 10px;     
  6.     color:#fff;     
  7. }     
  8.      
  9. #indie {     
  10.     background-color: #000;     
  11.     border: 1px solid #000;     
  12.     -moz-border-radius-topright: 10px;     
  13.     -moz-border-radius-bottomright: 10px;     
  14.     -webkit-border-top-left-radius: 10px;     
  15.     -webkit-border-bottom-left-radius: 10px;     
  16.     color:#fff;     
  17. }     


<div id="round"><h1>圆角边框</h1></div> 
<div id="indie"><h1>部分圆角</h1></div> 
 

不使用 border-radius 实现圆角
CSS3中,利用属性 border-radius 可以很方便的设置出圆角矩形,但是在IE8及以下版本却不支持这个属性,为了在旧版本的浏览器中实现宽高自适应的圆角矩形,可以采用以下三种方法。

1.使用背景图片制作圆角

使用背景图片制作宽、高自适应的圆角矩形,首先需要切出4个圆角图片,然后把4个圆角图片放在矩形的四个角上就大功告成了,这一共需要5个div标签,1个容器div和4个圆角背景div。是不是很好理解。

具体实现来说,需要注意一些细节。对于矩形容器div:

上下内边距的大小至少设置为圆角的高度。
position设置为相对定位。
放置内容。
对于4个圆角背景div:

分别设置各个圆角背景图片。
绝对定位于容器矩形的四个角。
需要设置宽高值才能显示背景图片。
假设圆角图片的宽高是5px,具体代码如下:

XML/HTML Code复制内容到剪贴板
  1. <div class="content">  
  2.     <div class="top-left"></div>  
  3.     <div class="top-right"></div>  
  4.     <div class="btm-left"></div>  
  5.  <div class="btm-right"></div>  
  6. </div>  
CSS Code复制内容到剪贴板
  1. .content {   
  2.  position: relative;   
  3.  padding: 5px;   
  4. }   
  5. .top-left,   
  6. .top-rightright,   
  7. .btm-left,   
  8. .btm-rightright {   
  9.  position: absolute;   
  10.  width: 5px;   
  11.  height: 5px;   
  12. }   
  13. .top-left {   
  14.  top: 0;   
  15.  left: 0;   
  16.  background: url(imgs/top-left.png) no-repeat top left;   
  17. }   
  18. .top-rightright {   
  19.  top: 0;   
  20.  rightright: 0;   
  21.  background: url(imgs/top-rightright.png) no-repeat top left;   
  22. }   
  23. .btm-left {   
  24.  bottombottom: 0;   
  25.  left: 0;   
  26.  background: url(imgs/btm-left.png) no-repeat top left;   
  27. }   
  28. .btm-rightright {   
  29.  bottombottom: 0;   
  30.  rightright: 0;   
  31.  background: url(imgs/btm-rightright.png) no-repeat top left;   
  32. }  

2.纯 CSS+div 制作圆角矩形

这种方法的原理是利用像素点绘制弧线来模拟圆角。简单起见,这里我用圆角半径为3px的例子讲解,其中圆角矩形的背景色为粉色,矩形的边框为黑色。左上角圆角放大后如下图所示:
border-radius以外的CSS圆角边框制作方法

这里矩形上下各需要3个高度为1px、垂直罗在一起的div才能模拟出圆角。具体实现如下:

第一个div就是上面图中矩形的黑色上边框,因为模拟的圆角半径为3px,所以该div的左右外边距设为3px,背景色设为黑色。
第二个div的左右外边距设为2px,左右边框为1px的黑线,背景色为粉色。
第三个div的左右外边距设为1px,左右边框为1px的黑线,背景色为粉色。
圆角矩形下面的两个圆角是以上三个div反序排列。
矩形内容区域的div只需要设置左右边框和背景色即可。
具体代码如下

XML/HTML Code复制内容到剪贴板
  1. <div class="wrapper">  
  2.     <div class="r1"></div>  
  3.  <div class="r2"></div>  
  4.  <div class="r3"></div>  
  5.  <div class="content">aaaaa</div>  
  6.  <div class="r3"></div>  
  7.  <div class="r2"></div>  
  8.  <div class="r1"></div>  
  9. </div>  
CSS Code复制内容到剪贴板
  1. .r1 {   
  2.  height: 1px;   
  3.  margin: 0 3px;   
  4.  background-color: #111;   
  5. }   
  6. .r2 {   
  7.  height: 1px;   
  8.  margin: 0 2px;   
  9.  background-color: #f4b4b4;   
  10.  border-left: 1px solid #111;   
  11.  border-right: 1px solid #111;   
  12. }   
  13. .r3 {   
  14.  height: 1px;   
  15.  margin: 0 1px;   
  16.  background-color: #f4b4b4;   
  17.  border-left: 1px solid #111;   
  18.  border-right: 1px solid #111;   
  19. }   
  20. .content {   
  21.  background-color: #f4b4b4;   
  22.  border-left: 1px solid #111;   
  23.  border-right: 1px solid #111;   
  24. }  

此方法优缺点分析:

不使用背景图片,减少了HTTP请求数。
后期维护性好,但是圆角矩形像素增加,无意义的div代码将成倍增加。
实现的圆角矩形有局限性。
只能实现纯色圆角。

3.使用CSS border 画出梯形模拟圆角

通过设置border属性,可以得到梯形和三角形,效果如下图所示:
border-radius以外的CSS圆角边框制作方法

当给div的四个边框设置比较大的宽度值时,就能得到四个梯形,如上图中的第一个图案;
在此基础上,当把div的高度值设为0后,就能得到梯形和等腰三角形了,如上图中的第二个图案;
当把div的宽、高都设为0,且只设置上、左的两个边框时,就能得到两个直角三角形,图中的第三个图案就是这种情况;
在此基础上,把其中的一个边框的颜色设置为透明,就能像第四个图案一样得到一个直角三角形。
代码如下:

XML/HTML Code复制内容到剪贴板
  1. <div class="box1"></div>  
  2. <div class="box2"></div>  
  3. <div class="box3"></div>  
  4. <div class="box4"></div>  
CSS Code复制内容到剪贴板
  1. .box1 {   
  2.  height: 20px;   
  3.  width: 20px;   
  4.  border-top: 20px solid red;   
  5.  border-right: 20px solid green;   
  6.  border-bottom: 20px solid blue;   
  7.  border-left: 20px solid yellow;   
  8. }   
  9. .box2 {   
  10.  height: 0;   
  11.  width: 20px;   
  12.  border-top: 20px solid red;   
  13.  border-right: 20px solid green;   
  14.  border-bottom: 20px solid blue;   
  15.  border-left: 20px solid yellow;   
  16. }   
  17. .box3 {   
  18.  height: 0;   
  19.  width: 0;   
  20.  border-top: 50px solid red;   
  21.  /* border-right: 20px solid green; */  
  22.  /* border-bottom: 20px solid blue; */  
  23.  border-left: 50px solid yellow;   
  24. }   
  25. .box4 {   
  26.  height: 0;   
  27.  width: 0;   
  28.  border-top: 50px solid red;   
  29.  /* border-right: 20px solid green; */  
  30.  /* border-bottom: 20px solid blue; */  
  31.  border-left: 50px solid transparent;   
  32. }  

已经知道了如何通过 border 画出梯形了,那又该如何利用梯形模拟圆角矩形呢?很简单,只要在矩形的上面和下面各放上一个梯形,就能得到圆角矩形了。原理嘛就是利用梯形的左右两个斜边模拟圆角啦,直接上效果图:
border-radius以外的CSS圆角边框制作方法

具体代码如下:

XML/HTML Code复制内容到剪贴板
  1. <div class="wrapper">  
  2.     <div class="top"></div>  
  3.  <div class="content">  
  4.      <p>利用border画出梯形,模拟圆角</p>  
  5.  </div>  
  6.  <div class="bottom"></div>  
  7. </div>   CSS Code复制内容到剪贴板
    1. div {   
    2.  box-sizing: border-box;   
    3. }   
    4. .top {   
    5.  height: 0;   
    6.  border-top: 3px solid transparent;   
    7.  border-bottom: 3px solid #111;   
    8.  border-left: 3px solid transparent;   
    9.  border-right: 3px solid transparent;   
    10. }   
    11. .bottombottom {   
    12.  height: 0;   
    13.  border-top: 3px solid #111;   
    14.  border-bottom: 3px solid transparent;   
    15.  border-left: 3px solid transparent;   
    16.  border-right: 3px solid transparent;   
    17. }   
    18. .content {   
    19.  color: #fff;   
    20.  background-color: #111;   
    21. }   
    22. .wrapper {   
    23.  width: 200px;   
    24.  margin: 0 auto;   
    25. }  
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。