網站首頁編程語言正文

CSS3：盒陰影、邊界圖片、指定每一個圓角、背景、過度、動畫、

作者：忘川之魚更新時間： 2022-07-22 編程語言

一、盒陰影

css3中的 box-shadow 屬性被用來添加陰影。

box-shadow：水平位置垂直位置模糊距離陰影尺寸(陰影大小) 陰影顏色內/外陰影(前兩個值必須寫，模糊值不能為負。)

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .div-0 {
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 1px solid red;
            box-shadow: 10px 10px 5px #888888;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="div-0"></div>

</body>
</html>

效果：

?二、邊界圖片

有了CSS3的border-image屬性，你可以使用圖像創建一個邊框。取值:

????????border-image-source :邊框背景圖片路徑
????????border-image-slice:圖片邊框向內偏移(切片)
????????border-image-width:圖片邊框的寬度
????????border-image-outset:邊框圖像區域超出邊框的量
????????border-image-repeat:圖片邊框是否應該平鋪(repeat)/鋪滿(round)/拉伸(stretch)(針對切片圖像)用于創建邊框的原始圖像。

transparent：給元素設置透明的邊框。

?border-image: url()：設置邊框圖片

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .div-3 {
            width: 300px;
            height: 200px;
            border: 15px solid transparent;
            border-image: url(img/border.png) 27 27 round;
        }
        
        .div-4 {
            width: 300px;
            height: 200px;
            border: 15px solid transparent;
            border-image: url(img/border.png) 27 27 repeat;
        }
        
        .div-5 {
            width: 300px;
            height: 200px;
            /* 給元素設置透明的邊框 
            transparent
            */
            border: 15px solid transparent;
            /* 設置邊框圖片 */
            border-image: url(img/border.png) 27 27 stretch;
        }
        
      
    </style>
</head>

<body>
    <div class="div-3"></div>
    <div class="div-4"></div>
    <div class="div-5"></div>
</body>

</html>

效果：

?

三、指定每一個圓角

CSS擁有用于為元素的每個角指定圓角的屬性:

?border-radius: 15px 50px 30px 5px;:左上角為15px，右上角為50px，右下角為30px，左下角為5px。
?border-radius: 15px 50px 30px;:左上角為15px，右上角和左下角為50px，右下角為30px。border-radius: 15px 50px; :左上角和右下角為15px，右上角和左下角為50px。
border-radius: 15px;:四個角都是15p×。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .div-1 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background: yellow;
            /* 圓 */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .div-2 {
            width: 100px;
            height: 100px;
            /* border: 5px solid red; */
            background-color: aquamarine;
            border-radius: 50%;
            /* 同時給元素設置內外陰影 */
            box-shadow: 30px 10px 5px rgba(247, 245, 245, 0.482) inset, 7px 5px 5px rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="div-1"></div>
    <div class="div-2"></div>
</body>

</html>

效果：

?四、背景

cSS3中包含幾個新的背景屬性，提供更大背景元素控制。.

1. background-image屬性

CSS3中可以通過background-image屬性添加背景圖片。

不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .div-6 {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            background-image: url(img/flower.gif), url(img/paper.gif);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="div-6">
        <p>今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好
        </p>
        <p>今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好
        </p>
        <p>今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好
        </p>
    </div>
</body>

</html>

效果：

?2.?background-origin屬性

background-origin屬性指定了背景圖像的位置區域

content-box、padding-box和border-box區域內可以放置背景圖像。

在content-box中定位背景圖片:

3. background-sze屬性

background-size指定背景圖像的大小。CSS3以前，背景圖像大小由圖像的實際大小決定。
CSS3中可以指定背景圖片，讓我們重新在不同的環境中指定背景圖片的大小。你可以指定像素或百分比大小。
你指定的大小是相對于父元素的寬度和高度的百分比的大小。

?案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
            .div-7 {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            background: url(img/flower.gif) no-repeat;
            /* cover,contain 注意這兩個值的區別 */
            background-size: contain;
        }
    </style>
</head>

<body>
    <div class="div-7">
        <p>今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好
        </p>
        <p>今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好
        </p>
        <p>今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好 今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好
        </p>
    </div>
</body>

</html>

效果：

?五、過度

cSS3過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容:

指定要添加效果的CSS屬性
指定效果的持續時間。實例:

1.transition 屬性是一個簡寫屬性，用于設置四個過渡屬：

transition-property????????????????????????規定設置過渡效果的 CSS 屬性的名稱。
transition-duration????????????????????????規定完成過渡效果需要多少秒或毫秒。
transition-timing-function? ? ? ? ? ? ??規定速度效果的速度曲線。
transition-delay? ? ? ? ? ? ? ? ? ? ? ? ? ??定義過渡效果何時開始。

如果未指定的期限,transition將沒有任何效果，因為默認值是O。

定的CSS屬性的值更改時效果會發生變化。一個典型CSS屬性的變化是用戶鼠標放在一個元素上時開始變化。

多項變化：要添加多個樣式的變化效果，添加的屬性由逗號分隔。

?2. transition-property 屬性：

值	描述
none	沒有屬性會獲得過渡效果。
all	所有屬性都將獲得過渡效果。
property	定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

3.? transition-duration 屬性：

?????time：規定完成過渡效果需要花費的時間（以秒或毫秒計）。默認值是 0，意味著不會有效果。

4. transition-timing-function 屬性：

值	描述
linear	規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

5.?transition-delay 屬性：

????????time????????規定在過渡效果開始之前需要等待的時間，以秒或毫秒計。

案例1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1 {
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            border-radius: 50%;
            transition: all 3s;
            transition-timing-function: steps(3);
        }
        
        .div-1:hover {
            background-color: blue;
            height: 400px;
            width: 400px;
        }
    </style>
</head>

<body>
    <div class="div-1"></div>
</body>

</html>

效果1：

案例2：動態時鐘

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clock {
            width: 284px;
            height: 284px;
            border-radius: 50%;
            position: relative;
            background-image: url(img/clock.png);
        }
        
        .clock::before {
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .clock::after {
            content: '';
            width: 2px;
            height: 30%;
            background-color: black;
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%);
            transform-origin: bottom;
            transition-duration: 60s;
            transition-timing-function: steps(60, start);
        }
        
        .clock:hover::after {
            transform: translate(-50%) rotate(360deg);
        }
    </style>
</head>

<body>
    <div class="clock"></div>
</body>

</html>

效果：

六、動畫

cSS3可以創建動畫，它可以取代許多網頁動畫圖像、Flash動畫和JavaScript 實現的效果。

1. 什么是CSS動畫?

????????動畫使元素逐漸從一種樣式變為另一種樣式。您可以隨意更改任意數量的CSS屬性。如需使用CSS動畫，您必須首先為動畫指定一些關鍵幀。關鍵幀包含元素在特定時間所擁有的樣式。

?2. @keyframes規則

如果你在@keyframes規則中指定了CSS樣式，動畫將在特定時間逐漸從當前樣式更改為新樣式要使動畫生效，必須將動畫綁定到某個元素。

3.指定動畫的填充模式

????????CSS動畫不會在第一個關鍵幀播放之前或在最后一個關鍵幀播放之后影響元素。animation-fil1-mode屬性能夠覆蓋這種行為。

????????在不播放動畫時（在開始之前，結束之后，或兩者都結束時)，animation-fll-mode屬性規定目標元素的樣式。

animation-fill-mode屬性可接受以下值:

?none -默認值。動畫在執行之前或之后不會對元素應用任何樣式。
?forwJrds -元素將保留由最后一個關鍵幀設置的樣式值（依賴animation-direction和animation-iteration-count)。
backwards -元素將獲取由第一個關鍵幀設置的樣式值（取決于animation-direction)，并在動畫延遲期間保留該值。
- both-動畫會同時遵循向前和向后的規則，從而在兩個方向上擴展動畫屬性。

4. 反向或交替運行動畫

animation-direction屬性指定是向前播放、向后播放還是交替播放動畫。
animation-direction屬性可接受以下值:
normal-動畫正常播放(向前)。默認值
reverse-動畫以反方向播放(向后)
?alternate-動畫先向前播放，然后向后工
. alternate-reverse-動畫先向后播放，然后向前

5. 延遲動畫：

????????animation-delay屬性規定動畫開始的延遲時間。

????????負值也是允許的。如果使用負值，則動畫將開始播放，如同已播放N秒。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1 {
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            border-radius: 50%;
            /* 應用動畫 */
            /*指定動畫的名稱*/
            animation-name: div_animate;
            /*動畫的持續時間*/
            animation-duration: 4s;
            /*動畫填充模式，forwards的作用是將動畫的樣式停留在最后一個*/
            animation-fill-mode: forwards;
            /*animation-delay:動畫延遲的時間，當值為負數時表示動畫已經執行了多長時間*/
            animation-delay: 2s;
            animation-direction: alternate;
            /**/
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(.97, .08, .35, .72);
        }
        
        @keyframes div_animate {
            from {
                /* background-color: antiquewhite; */
                margin-left: 0;
            }
            to {
                /* background-color: blue; */
                margin-left: 500px;
            }
            /* 25% {
                background-color: red;
            }
            50% {
                background-color: rebeccapurple;
            }
            75% {
                background-color: green;
            }
            100% {
                background-color: blue;
            } */
        }
    </style>
</head>

<body>
    <div class="div-1"></div>
</body>

</html>

效果：

原文鏈接：https://blog.csdn.net/m0_68618659/article/details/125915483

上一篇：linux centos 7 vim配置詳解
下一篇：對稱式加密與非對稱式加密的對比

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁編程語言正文

CSS3：盒陰影、邊界圖片、指定每一個圓角、背景、過度、動畫、

一、盒陰影

案例：

效果：

?二、邊界圖片

案例：

效果：

?

三、指定每一個圓角

效果：

?四、背景

1. background-image屬性

案例：

效果：

?2.?background-origin屬性

3. background-sze屬性

?案例：

效果：

?五、過度

?2. transition-property 屬性：

3.? transition-duration 屬性：

4. transition-timing-function 屬性：

5.?transition-delay 屬性：

案例1：

效果1：

案例2：動態時鐘

效果：

六、動畫

案例：

效果：

相關推薦

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁 編程語言 正文

CSS3：盒陰影、邊界圖片、指定每一個圓角、背景、過度、動畫、

一、盒陰影

案例：

效果：

?二、邊界圖片

案例：

效果：

?

三、指定每一個圓角

效果：

?四、背景

1. background-image屬性

案例：

效果：

?2.?background-origin屬性

3. background-sze屬性

?案例：

效果：

?五、過度

?2. transition-property 屬性：

3.? transition-duration 屬性：

4. transition-timing-function 屬性：

5.?transition-delay 屬性：

案例1：

效果1：

案例2：動態時鐘

效果：

六、動畫

案例：

效果：

相關推薦

網站首頁編程語言正文