css圓角邊框及陰影

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;   // 定義了左下角的弧度

1）畫圓弧

title>

div 
style>
head>
div>
body>
html>
執行結果
很明顯，這裡四個圓弧的半徑都為50px；
2）畫圓
畫圓的思路其實很簡單,只要保證兩點
1、盒子的長和寬要相等
2、圓弧的半徑要為盒子長的一半
比如將上面屬性修改為：
border-radius: 100px;

很明顯這裡已經是乙個圓了。這裡我們來思考為什麼要設定圓弧設定盒子長的一半。

其實很簡單，要實現圓，那麼長和寬就應該相等，同時它們的長度就是直徑,那麼一半就是半徑了。

除了可以為元素的四周設定倒圓角以外,css3還為我們提供了陰影的功能,能夠製作更為精美的外觀。

1、邊框陰影語法

語法

box-shadow: h-shadow v-shadow blur spread color inset;
# 前兩個屬性是必須寫的。其餘的可以省略。
屬性值

2、示例

示例

css圓角邊框，盒子，文字陰影

boeder radius屬性用於設定元素的外邊框圓角。語法 border radius 20px 50 引數值可以為 數值或者百分比的形式。如果是正方形，想要設定為乙個圓，把數值修改為高度或者寬度的一半即可，或者直接寫為50 如果是個矩形，設定為高度的一半就可以做 該屬性是乙個簡寫屬性，可以跟四個...

邊框圓角 盒陰影

普通邊框border 5px solid red border bottom 30px solid red border top color red solid 實線 dotted 圓點線 dashed 虛線 border是對四條邊的3個屬性 width style color 進行設定，也可以指定...

圓角邊框 盒子陰影

在css3中新增了圓角邊框的樣式 border radius屬性用於設定元素的外邊框圓角 語法 border radius length 原理 radius半徑原理 橢 圓與邊框交集形成圓角效果 css3中新增了盒子陰影 box shadow屬性為盒子新增陰影 語法 box shadow h sha...