CSS 3 背景與漸變應用技巧 -cyy-有解無憂

背景顏色與裁切使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        article{
            width:300px;
            height:300px;
            border:10px dashed red;
            background-color:pink;
            padding:10px;
            /* background-clip:content-box; */
            /* background-clip:padding-box; */
            background-clip:border-box; /* 默認效果 */
        }
    </style>
</head>
<body>

    <article>
        層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言，CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化，
    </article>
</body>
</html>

背景重復與滾動：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        div{
           width:600px;
           height:300px;
           overflow:auto;
           border:1px solid; 
        }
        article{
            width:600px;
            height:1000px;
            border:10px dashed red;
            background-color:pink;
            padding:10px;
            background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1596852407,3936775780&fm=26&gp=0.jpg);
            /* background-repeat:no-repeat; */
            /* background-repeat:repeat-x;
            background-repeat:repeat-y; */
            /* 平均分布 */
            background-repeat:space;
            background-attachment:fixed;
        }
    </style>
</head>
<body>
    <div>
        <article>
            層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言，CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化，
        </article>
    </div>
</body>
</html>

背景重復與尺寸定制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:600px;
            height:1000px;
            border:10px dashed red;
            background-color:pink;
            padding:10px;
            background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1596852407,3936775780&fm=26&gp=0.jpg);
            background-repeat:no-repeat;
            /* 改變背景圖片的位置 */
            /* background-position:10px 40%; */
            /* 修改背景圖片的尺寸 */
            background-size:600px auto;
            background-size:cover;
            background-size:contain;
        }
    </style>
</head>
<body>
        <article>
            層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言，CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化，
        </article>
</body>
</html>

多圖定義與組合陳述句：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:600px;
            height:1000px;
            border:10px dashed red;
            background-color:pink;
            padding:10px;
            /* 定義多圖 */
            /* background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1596852407,3936775780&fm=26&gp=0.jpg),url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1861627709,1630773149&fm=26&gp=0.jpg);
            background-position:left top,300px 300px;
            background-repeat:no-repeat,repeat-y; */

            /* 簡寫 */
            background:pink url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604759832058&di=80459d54e5128f3cb92272d539928f46&imgtype=0&src=https://www.cnblogs.com/chenyingying0/archive/2020/11/07/http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F07%2F20190207111026_QQMLz.thumb.700_0.jpeg) no-repeat center;
            background-size:100px auto;
        }
    </style>
</head>
<body>
        <article>
            層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言，CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化，
        </article>
</body>
</html>

盒子陰影使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:100px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            background-color:pink;
            /* box-shadow:10px 10px rgba(0,0,.5); */
            box-shadow:0 0 5px rgba(100,100,100,.3);
        }
    </style>
</head>
<body>
    <div>cyy</div>
</body>
</html>

元素背景漸變色使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:10px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            background:linear-gradient(pink,orange,lightblue);
            background:linear-gradient(45deg,pink,orange,lightblue);
            background:linear-gradient(to left,pink,orange,lightblue);
            background:linear-gradient(to right bottom,pink,orange,lightblue);
            
        }
        nav{
            width:300px;
            height:50px;
            background:linear-gradient(pink,#e49da9,pink);
        }
    </style>
</head>
<body>
    <div>cyy</div>
    <nav>導航條</nav>
</body>
</html>

徑向漸變的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:10px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            background:radial-gradient(pink,orange,lightblue);
            background:radial-gradient(100px 200px,pink,orange,lightblue);
            background:radial-gradient(100px 200px,at left center,pink,orange,lightblue);
            background:radial-gradient(at left center,pink,orange,lightblue);
            background:radial-gradient(at 50% 0%,pink,orange,lightblue);
        }
    </style>
</head>
<body>
    <div>cyy</div>
</body>
</html>

鏡像標識位繪制小太陽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:10px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            background:linear-gradient(pink 40%,orange 60%,lightblue 80%);
            /* 小太陽 */
            background:radial-gradient(red,yellow 30%,black 70%,black 100%);
        }
    </style>
</head>
<body>
    <div>cyy</div>
</body>
</html>

顏色漸變中間閾值使用技巧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:10px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            /* 設定中間值 */
            background:linear-gradient(90deg,pink,40%,lightblue);
        }
    </style>
</head>
<body>
    <div>cyy</div>
</body>
</html>

使用漸變重復繪制網站進度條：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3">
    <meta name="description" content="網站描述bla bla">
    <title>網站標題</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:10px;
        }
        div{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            /* 重復線性漸變 */
            background:repeating-linear-gradient(90deg,pink,25px,yellow 25px,25px,lightblue 50px);
        }
        aside{
            width:300px;
            height:300px;
            border:3px solid #ddd;
            background:repeating-radial-gradient(pink,lightblue 20%,pink 60%);
        }
    </style>
</head>
<body>
    <div>cyy</div>
    <aside></aside>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/206089.html

標籤：其他

上一篇：如何通過.Meka勒索軟體保護資料免受加密?

下一篇：我掏空了各大搜索引擎，整理了HTML圖片標簽筆記，滿滿干貨