隨筆- 292  評論- 294  文章- 1 

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)


posted on 2019-12-12 23:07  雨點的名字  閱讀(...)  評論(...編輯  收藏

四川金7乐历史开奖号码查询