圓角邊框、邊框陰影
CSS3可以簡單理解成是CSS的增強版，它的優點在於不僅有利於開發與維護，還能提高網站的性能。
一、圓角邊框
圓角在實際開放過程中，還是蠻常見的。以前基本是通過背景圖片做的，有了CSS3后可以使用簡單的屬性搞定，可以通過border-radius設置元素的圓角半徑。
1、圓角邊框語法
圓角邊框屬性 : border-radius
屬性值
border-radius: 屬性1，屬性2，屬性3，屬性4
# 四個值：第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角
border-radius: 屬性1，屬性2，屬性3
# 三個值：上->左右->下
border-radius: 屬性1，屬性2
# 兩個值：上下->左右
border-radius: 屬性1
# 一個值：四個圓角值相同
對於每個邊角也可以單獨寫
border-top-left-radius:10px; // 定義了左上角的弧度半徑為10px
border-top-right-radius:5px; // 定義了右上角的弧度5px;
border-bottom-right-radius:10px; // 定義了右下角的弧度
border-bottom-left-radius:10px; // 定義了左下角的弧度
2、示例
1）畫圓弧
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background: pink;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
運行結果
很明顯，這里四個圓弧的半徑都為50px；
2）畫圓
畫圓的思路其實很簡單,只要保證兩點
1、盒子的長和寬要相等
2、圓弧的半徑要為盒子長的一半
比如將上面屬性修改為：
border-radius: 100px;
再運行
很明顯這里已經是一個圓了。這里我們來思考為什么要設置圓弧設置盒子長的一半。
其實很簡單，要實現圓，那么長和寬就應該相等，同時它們的長度就是直徑,那么一半就是半徑了。
二、邊框陰影
除了可以為元素的四周設置倒圓角以外,CSS3還為我們提供了陰影的功能,能夠制作更為精美的外觀。
1、邊框陰影語法
語法
box-shadow: h-shadow v-shadow blur spread color inset;
# 前兩個屬性是必須寫的。其余的可以省略。
屬性值
2、示例
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子陰影</title>
<style>
div {
width: 200px;
height: 200px;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);
/*transition: all 1s;*/
}
div:hover { /*鼠標經過div時候的樣子。。。*/
box-shadow: 0 15px 30px rgba(255,0,0,0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
運行結果
``` 你如果願意有所作為，就必須有始有終。(15) ```