WEB前端第十五課——陰影及漸變

時間 2020-08-06

標籤 web 前端第十五陰影漸變欄目 HTML 简体版

原文原文鏈接

1.border-radius圓角css

　　語法格式html

　　　　border-radius:value，四個角web

　　　　border-radius:value value，第一個value設置左上角和右下角，第二個value設置右上角和左下角瀏覽器

　　　　border-radius:value value value value，從左上角開始順時針設置四個角ide

　　　　value單位：px、%、emspa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css圓角</title>
    <style>
        .circle{
            width: 200px;
            height: 300px;
            background-color: greenyellow;
            margin: auto;
            border-radius: 50% 50% 45% 45%;
            font-size: 60px;
            color: #ef4222;
            font-family: Algerian;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div class="circle">
        egg
    </div>
</body>
</html>

2.box-shadow盒陰影htm

　　屬性值：h-shadow（必需，水平陰影的位置，容許負值）、v-shadow（必需，垂直陰影的位置，容許負值）、blog

　　　　　　blur（模糊距離）、spread（陰影尺寸）、color（陰影顏色）、inset（將外部陰影（outset）改成內部陰影）ip

　　書寫格式：div { box-shadow: -6px, 7px, 8px, 9px, greenyellow; }，h-shadow負值表明左邊（正值表明右邊）、v-shadow負值表明上邊（正值表明下邊）utf-8

　　能夠同時書寫多組屬性值，分別設置四條邊樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒陰影</title>
    <style>
        .square1{
            width: 100px;
            height: 100px;
            border: 4px solid greenyellow;
            margin: 100px auto;
            box-shadow: -6px 7px 8px 9px yellow;
        }
        .square2{
            width: 100px;
            height: 100px;
            border: 4px solid greenyellow;
            margin: 100px auto;
            box-shadow: -6px 0px 9px 9px yellow,
                        0px -6px 9px 9px blue,
                        6px 0px 9px 9px orange,
                        0px 6px 9px 9px purple;
        }
    </style>
</head>
<body>
    <div class="square1"></div>
    <div class="square2"></div>
</body>
</html>

3.text-shadow文本陰影

　　屬性值：h-shadow（必需，水平陰影位置，可負值）、v-shadow（必需，垂直陰影位置，可負值）、blur（模糊距離）、color（陰影顏色）

　　書寫格式：div { text-shadow: -10px 20px 30px blue; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css文字陰影</title>
    <style>
        .text{
            font-size: 80px;
            font-family: 楷體;
            color: orangered;
            font-weight: bolder;
            letter-spacing: 1em;
            text-align: center;
            text-shadow: -10px -5px 3px greenyellow;
        }
    </style>
</head>
<body>
    <div class="text">避暑山莊</div>
</body>
</html>

4.gradients漸變，在兩個或多個顏色之間顯示平穩的過渡

　　兩種漸變類型：

　　linear gradients，線性漸變

　　　　書寫格式：background：linear-gradient（direction，color-stop1，color-stop2，……）;

　　　　direction值：默認爲自上向下漸變，to bottom、to top、to right、to left、to bottom right、to left top等

　　　　　　　　　　也能夠使用角度（數值）設置方向，0deg表明從下向上、90deg表明從左向右、180deg表明從上向下、-90deg表明從右向左

　　　　線性漸變至少設置兩種顏色，默認狀況下，每種顏色所佔空間是均勻分佈

　　radial gradients，徑向漸變

　　　　書寫格式：background：radial-gradient（center，shape，size，start-color，……，last-color）；

　　　　默認狀況下，漸變的起點是center（中心），漸變的形狀（shape）是ellipse（橢圓形）

　　　　center，漸變的起點能夠經過「 at X Y」（像素）或「 at x% y%」座標的方式設置（左上角做爲0 0點座標），還能夠經過方位設置「 at left top」（或right、center、bottom等組合）

　　　　shape，漸變的形狀也能夠設置爲 circle（圓形）

　　　　size，參數包括：closest-side（最近邊）、farthest-side（最遠邊）、closest-Corner（最近角）、farthest-corner（最遠角，默認值）

　　　　線性漸變至少設置兩種顏色，默認狀況下，每種顏色所佔空間是均勻分佈

5.linear-gradient線性漸變

　　① 自上向下漸變

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS線性漸變</title>
    <style>
        .grad {
            height: 200px;
            background: -webkit-linear-gradient(red , blue); /* Safari */
            background: -o-linear-gradient(red, blue); /* Opera */
            background: -moz-linear-gradient(red, blue); /* Firefox */
            background: linear-gradient(red , blue); /* 標準的語法（必須放在最後） */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

　　② 從左向右漸變（不一樣的瀏覽器內核，方向設置方式不一樣）

<html>
<head>
    <meta charset="utf-8">
    <title>CSS線性漸變</title>
    <style>
        .grad {
            height: 200px;
            background: -webkit-linear-gradient(left, red, blue); /* Safari */
            background: -o-linear-gradient(right, red, blue); /* Opera */
            background: -moz-linear-gradient(right, red, blue); /* Firefox */
            background: linear-gradient(to right, red, blue); /* 標準的語法（必須放在最後） */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

　　③ 使用角度設置漸變

<html>
<head>
    <meta charset="utf-8">
    <title>CSS線性漸變</title>
    <style>
        .grad {
            width: 300px;
            height: 300px;
            background: -webkit-linear-gradient(120deg, red, blue); /* Safari */
            background: -o-linear-gradient(120deg, red, blue); /* Opera */
            background: -moz-linear-gradient(120deg, red, blue); /* Firefox */
            background: linear-gradient(120deg, red, blue); /* 標準的語法（必須放在最後） */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

　　④ 顏色結點不均勻分佈漸變

<html>
<head>
    <meta charset="utf-8">
    <title>CSS線性漸變</title>
    <style>
        .grad {
            height: 500px;
            background: -webkit-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* Safari */
            background: -o-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%);/* Opera */
            background: -moz-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* Firefox */
            background: linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* 標準的語法（必須放在最後） */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

　　⑤ 重複（循環）漸變

<html>
<head>
    <meta charset="utf-8">
    <title>CSS線性漸變</title>
    <style>
        .grad {
            height: 500px;
            background: -webkit-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Safari */
            background: -o-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Opera */
            background: -moz-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Firefox */
            background: repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* 標準的語法（必須放在最後） */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

　　⑥ 透明度漸變（經過rgba定義顏色和透明度）

<html>
<head>
    <meta charset="utf-8">
    <title>CSS線性漸變</title>
    <style>
        .grad {
            height: 200px;
            background: -webkit-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1)); /* Safari */
            background: -o-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1));/* Opera */
            background: -moz-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1)); /* Firefox */
            background: linear-gradient(to right,rgba(255,0,255,0),rgba(255,0,255,1));/* 標準的語法（必須放在最後） */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

6.radial-gradient徑向漸變

　　① 從中心漸變

<html>
<head>
    <meta charset="utf-8">
    <title>CSS徑向漸變</title>
    <style>
        .grad {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            background: -webkit-radial-gradient(at center,yellow,orangered,black); /* Safari */
            background: -o-radial-gradient(at center,yellow,orangered,black); /* Opera */
            background: -moz-radial-gradient(at center,yellow,orangered,black);  /* Firefox */
            background: radial-gradient(at center,yellow,orangered,black); /* 標準的語法（必須放在最後） */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

　　② 從四角漸變

<html>
<head>
    <meta charset="utf-8">
    <title>CSS徑向漸變</title>
    <style>
        .grad {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            background: -webkit-radial-gradient(at left top,yellow,orangered,black); /* Safari */
            background: -o-radial-gradient(at left top,yellow,orangered,black); /* Opera */
            background: -moz-radial-gradient(at left top,yellow,orangered,black);  /* Firefox */
            background: radial-gradient(at left top,yellow,orangered,black); /* 標準的語法（必須放在最後） */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

　　③ 從四邊漸變

<html>
<head>
    <meta charset="utf-8">
    <title>CSS徑向漸變</title>
    <style>
        .grad {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            background: -webkit-radial-gradient(at left center,yellow,orangered,black); /* Safari */
            background: -o-radial-gradient(at left center,yellow,orangered,black); /* Opera */
            background: -moz-radial-gradient(at left center,yellow,orangered,black);  /* Firefox */
            background: radial-gradient(at left center,yellow,orangered,black); /* 標準的語法（必須放在最後） */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

　　④ 漸變大小和圓形漸變（注意：size、shape與center之間經過「空格」分開，而非逗號！）

<html>
<head>
    <meta charset="utf-8">
    <title>CSS徑向漸變</title>
    <style>
        .grad {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            background: -webkit-radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* Safari */
            background: -o-radial-gradient(circle closest-side  at 200px 100px,yellow,orangered,black); /* Opera */
            background: -moz-radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black);  /* Firefox */
            background: radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* 標準的語法（必須放在最後） */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

　　⑤ 重複漸變和不均勻分佈漸變，相似線性漸變

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。