CSS3中border

2020-10-30 14:41 jianzhan

border-radius CSS3中的意味着——第1个在小区中获得普遍应用新特性。这代表着,去除Internet Explorer 8及更低版本号,全部的访问器能够显示信息圆角。
以便使款式能正确运用,必须为Webkit和Mozilla核心加上前缀。

CSS Code拷贝內容到剪贴板
  1. -webkit-border-radius: 10px;   
  2. -moz-border-radius: 10px;   
  3. border-radius: 10px;  

但是,今日大家不关注前缀,只简易坚持不懈官方方式:border-radius。

如你所料,大家能够为每一个角特定不一样的值。

CSS Code拷贝內容到剪贴板
  1. border-top-left-radius: 20px;   
  2. border-top-rightright-radius: 0;   
  3. border-bottom-rightright-radius: 30px;   
  4. border-bottom-left-radius: 0;  

在上面的编码中,设定border-top-right-radius和border-bottom-left-radius为零是过剩的,除非该元素有承继的值。
按top-left, top-right, bottom-right, bottom-left次序设定每一个 radius 的值。假如省略 bottom-left,则与 top-right 同样。假如省略 bottom-right,则与 top-left 同样。假如省略 top-right,则与 top-left 同样。
大家能够试验,

CSS Code拷贝內容到剪贴板
  1. border-radius:2px;  

等额的于:

CSS Code拷贝內容到剪贴板
  1. border-top-left-radius:2px;   
  2. border-top-rightright-radius:2px;   
  3. border-bottom-rightright-radius:2px;   
  4. border-bottom-left-radius:2px;  

事例2:

CSS Code拷贝內容到剪贴板
  1. border-radius:2em 1em 4em / 0.5em 3em;  

等额的于:

CSS Code拷贝內容到剪贴板
  1. border-top-left-radius:2em 0.5;   
  2. border-top-rightright-radius:1em 3em;   
  3. border-bottom-rightright-radius:4em 0.5em;   
  4. border-bottom-left-radius:1em 3em;  

就像margin和padding1样,假如必须的话,这些设定能够合拼为1个单1的特性。

CSS Code拷贝內容到剪贴板
  1. /* 左上角, 右上角, 右下角, 左下角 */  
  2. border-radius: 20px 0 30px 0;  

举个事例(网页页面设计方案师常常这样做),能够用CSS的border-radius特性仿真模拟柠檬的样子,以下:

CSS Code拷贝內容到剪贴板
  1. .lemon {   
  2.    width200pxheight200px;   
  3.     
  4.    background#F5F240;   
  5.    border1px solid #F0D900;        
  6.    border-radius: 10px 150px 30px 150px;   
  7. }