CSS3(1)---圓角邊框、邊框陰影
阿新 • • 發佈：2019-12-13
CSS3(1)---圓角邊框、邊框陰影
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)<