（CSS）border-radius 圓角邊框 @ 法奇的帝窩

border-radius 屬性能夠作出圓角的效果。方法很簡單如下：

<div id="square_div"></div>

#square_div{
  background-color: red;
  width: 80px;
  height: 50px;
  border-radius: 25px;
}

從上面的代碼可以得到一個紅色且四個圓角半徑為 25px 的圖形。

border-radius 當然不是只能設定一個參數，它能接收四個圓角的半徑。

舉個例子：border-radius: a b c d：

只輸入a，則四個角都套用a。
只輸入a、b，則左上右下套用a、右上左下套用b。
只輸入a、b、c，則左上套用a、右上左下套用b、右下套用 c。
a、b、c、d都輸入，則左上套用a、右上套用b、右下套用c、左下套用d。

下面輸入框可以操作下，看一看實際效果。

border-radius:

下方是上面這隻程式的代碼。

<label for="css_test">border-radius:</label>
<input id="css_test" value="10px 10px 10px 10px" onkeyup="changeRadius();"></input>
<br/>
<br/>
<div id="radius_test"></div>

#css_test {
  width: 300px;
}

#radius_test {
  background: green;
  width: 200px;
  height: 100px;
}

var radiusTest = document.getElementById("radius_test");
var cssTest = document.getElementById("css_test");

function changeRadius() {
  radiusTest.style.borderRadius = cssTest.value;
}

changeRadius();

但這樣使用實在不太直覺，因此有另外個別設定圓角的方式。

用下方四種屬性即可個別設定四個圓角半徑。

border-top-right-radius
border-top-left-radius
border-bottom-right-radius
border-bottom-left-radius

<div id="square_div"></div>

#square_div {
  background-color: red;
  width: 80px;
  height: 50px;
  border-top-right-radius: 10px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

上方代碼可以得到一個不規則的紅色形狀，這是由於四個角都設定不一樣的圓角半徑所致，運用這個特性可以創造各種圓滑的形狀。

此外這四個屬性還能設定圓角的水平、垂直半徑，這樣可以可以達到相當多的形狀變化。

下方的程式可以操作下，分別設定水平、垂直的數值來看看出來的形狀效果。

水平 px
垂直 px

以下是上面這隻程式的代碼。

<div>
  <div id="css_output"></div>
  <div class="top_left">
    <label>水平</label>
    <input type="number" id="top_left_vertical" value="0" step="10" min="0" onKeyPress="return isKeyInNum(event)" onChange="changeGraphics();">
    </input>
    <label>px</label>
    <br/>
    <label>垂直</label>
    <input type="number" id="top_left_horizon" value="0" step="10" min="0" onKeyPress="return isKeyInNum(event)" onChange="changeGraphics();">
    </input>
    <label>px</label>
  </div>

  <div class="top_right">
    <label>水平</label>
    <input type="number" id="top_right_vertical" value="0" step="10" min="0" onKeyPress="return isKeyInNum(event)" onChange="changeGraphics();">
    </input>
    <label>px</label>
    <br/>
    <label>垂直</label>
    <input type="number" id="top_right_horizon" value="0" step="10" min="0" onKeyPress="return isKeyInNum(event)" onChange="changeGraphics();">
    </input>
    <label>px</label>
  </div>

  <div class="bottom_left">
    <label>水平</label>
    <input type="number" id="bottom_left_vertical" value="0" step="10" min="0" onKeyPress="return isKeyInNum(event)" onChange="changeGraphics();">
    </input>
    <label>px</label>
    <br/>
    <label>垂直</label>
    <input type="number" id="bottom_left_horizon" value="0" step="10" min="0" onKeyPress="return isKeyInNum(event)" onChange="changeGraphics();">
    </input>
    <label>px</label>
  </div>

  <div class="bottom_right">
    <label>水平</label>
    <input type="number" id="bottom_right_vertical" value="0" step="10" min="0" onKeyPress="return isKeyInNum(event)" onChange="changeGraphics();">
    </input>
    <label>px</label>
    <br/>
    <label>垂直</label>
    <input type="number" id="bottom_right_horizon" value="0" step="10" min="0" onKeyPress="return isKeyInNum(event)" onChange="changeGraphics();">
    </input>
    <label>px</label>
  </div>
</div>

div {
  position: relative;
}

input {
  width: 50px;
}

#css_output {
  position: absolute;
  background: #CC3333;
  top: 60px;
  width: 300px;
  height: 200px;
  text-align: center; 
  color: #FFCC22;
}

.top_left {
  position: absolute;
  top: 10px;
  left: 10px;
}

.top_right {
  position: absolute;
  top: 10px;
  left: 210px;
}

.bottom_left {
  position: absolute;
  top: 280px;
  left: 10px;
}

.bottom_right {
  position: absolute;
  top: 280px;
  left: 210px;
}

var cssOutput = document.getElementById("css_output");
var topLeftV = document.getElementById("top_left_vertical");
var topLeftH = document.getElementById("top_left_horizon");
var topRightV = document.getElementById("top_right_vertical");
var topRightH = document.getElementById("top_right_horizon");
var bottomLeftV = document.getElementById("bottom_left_vertical");
var bottomLeftH = document.getElementById("bottom_left_horizon");
var bottomRightV = document.getElementById("bottom_right_vertical");
var bottomRightH = document.getElementById("bottom_right_horizon");
var radiusO = {
  "topLeftV": 0,
  "topLeftH": 0,
  "topRightV": 0,
  "topRightH": 0,
  "bottomLeftV": 0,
  "bottomLeftH": 0,
  "bottomRightV": 0,
  "bottomRightH": 0
};

function isKeyInNum(e) {
  var code = e.charCode ? e.charCode : e.keyCode;
  var b1 = !e.shiftKey ;
  var b2 = !e.ctrlKey ;
  var b3 = !e.altKey ; 
  var b4 = !e.metaKey ; 
  var b5 = code != 46 ; 
  var b6 = code > 31 ; 
  var b7 = code < 48 || code > 57 ; 
  var b8 = b6 && b7 ; 
  
  if (b1 && b2 && b3 && b4 && b5 && b8) {
    return false;
  }
  else {
    return true;
  }
};

function changeGraphics() {
  radiusO.topLeftV = toNum(topLeftV.value);
  radiusO.topLeftH = toNum(topLeftH.value);
  radiusO.topRightV = toNum(topRightV.value);
  radiusO.topRightH = toNum(topRightH.value);
  radiusO.bottomLeftV = toNum(bottomLeftV.value);
  radiusO.bottomLeftH = toNum(bottomLeftH.value);
  radiusO.bottomRightV = toNum(bottomRightV.value);
  radiusO.bottomRightH = toNum(bottomRightH.value);
  
  if (radiusO.topLeftH === 0) {
    radiusO.topLeftH = radiusO.topLeftV ;
  }
  
  if (radiusO.topRightH === 0) {
    radiusO.topRightH = radiusO.topRightV ;
  }
  
  if (radiusO.bottomLeftH === 0) {
    radiusO.bottomLeftH = radiusO.bottomLeftV ;
  }
  
  if (radiusO.bottomRightH === 0) {
    radiusO.bottomRightH = radiusO.bottomRightV ;
  }
  
  cssOutput.style.borderTopLeftRadius = radiusO.topLeftV + "px " + radiusO.topLeftH + "px";
  cssOutput.style.borderTopRightRadius = radiusO.topRightV + "px " + radiusO.topRightH + "px";
  cssOutput.style.borderBottomLeftRadius = radiusO.bottomLeftV + "px " + radiusO.bottomLeftH + "px";
  cssOutput.style.borderBottomRightRadius = radiusO.bottomRightV + "px " + radiusO.bottomRightH + "px";
  cssOutput.innerHTML = "border-top-left-radius: " + radiusO.topLeftV + "px " + radiusO.topLeftH + "px;<br/>"
    + "border-top-right-radius: " + radiusO.topRightV + "px " + radiusO.topRightH + "px;<br/>"
    + "border-bottom-left-radius: " + radiusO.bottomLeftV + "px " + radiusO.bottomLeftH + "px;<br/>"
    + "border-bottom-right-radius: " + radiusO.bottomRightV + "px " + radiusO.bottomRightH + "px;<br/>";
};

function toNum(v) {
  var result = parseFloat(v);
  
  if (isNaN(result)) {
    result = 0 ;
  }
  
  return result ;
};