这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > CSS > 正文
CSS技巧:开发更好的圆角
2013年07月14日 CSS ⁄ 共 1599字 等你评论

文:Tree-house    译:苇笛书生    原文:http://blog.teamtreehouse.com/css-tip-better-rounded-borders

在设计时我们都使用 : border-radius,来给元素添加圆角: img,div 的,nav 等......但是你有没有注意到某个元素如果有粗边框那么对他添加圆角会发生什么呢?

大家看一下在我的《深入探讨CSS》主题中,可以了解到用:border-radius 所形成的边界半径的圆角,都是一个四分之一圆。

css圆角

 

每个圆角都是一个四分之一圆

当连接粗边框的时候:

当我们对一个有粗的 border-width  的元素使用:border-radius 会发生一个小问题。请看下面的图像,举个例子:有一个 border-radius 的半径值是 border-width 的值的2倍。

  1. .mike {  
  2.   border-radius: 12px;  
  3.   border6px solid crimson;  
  4. }  

 

border-radius=2x border-width

嗯,问题还没有出现

 但是,如果我们让border-width 大于 border-radius 那么我们就会失去想要的圆角,图像边缘就会变成正方的。

  1. .mike {  
  2.   border-radius: 12px;  
  3.   border14px solid crimson;  
  4. }  

border-width比border-redius要大

 

边框变得更宽(粗),图像的圆角就变成方的了

这是怎么发生的?

这是因为 border-radius 塑造的实际上是边框的外部,而不是内部。内半径的形状是由 border-radius 的值减去 border-width 的值决定的。这个结果就通常会导致外半径的值小于内半径。

所以,如果 border-width 的值大于 border-radius 那么我们就会看到一个粗的正方边框连接着俩条边框线,其实实际上它是一条更粗的圆角边框而已。

方的内圆角

注意这个方的“内圆角”

为了使俩个同样的圆角边框成比例,我们需要调整圆角半径的值等于俩倍的边框宽度,或者是 border-width 加上 border-radius 的总和。

  1. .mike {  
  2.   border-radius: 26px;  
  3.   border14px solid crimson;  
  4. }  

change border-radius

当我们改变border-radius为26px时,圆角又重新回来了

方法二: Box-shadow 

其它圆角方法:当我们使用 box-shadow 时候,阴影效果是随着元素的 border-radius 而变化的。考虑到这一点,我们可以使用 box-shadow 来创建圆角半径,使他看起来像边框一样。

扩展半径的设置值就是阴影的扩展距离。若我们设置偏移的模糊值为0那么,就定义了元素周围一个锐利的阴影效果。

  1. .mike {  
  2.   border-radius: 12px;  
  3.   box-shadow: 0 0 0 14px crimson;  
  4. }  

用 box-shadow 实现

这个结果和我们刚才的效果很相像,但是,我们也不必担心当增加了 border-width 的时候 border-radius 要怎么设置,因为 阴影会随着边框而变化。

 方法三,用CSS框架 SASS 变量来实现

如果我们使用了预处理的CSS框架,如SASS,我们可以创建边框的宽度和半径的变量,然后用一个简单的数学运算,比例塑造的半径。

  1. $border-width14px;  
  2. $radius: $border-width*1.9;    
  3.   
  4. .mike {  
  5.   border: $border-width solid crimson;  
  6.   border-radius: $radius;  
  7. }  

小结:

我们所讨论的 box-shadow 方法要注意的是:由于 box-shadow 不是一个元素的盒模型的一部分,是人为的创造重叠边界的一部分,所以其他内联(inline)元素或浮动(float)元素,我们需要额外的添加 margin 以弥补。

友荐云推荐
×