當前位置：首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

HTML連載70-相片墻、盒子陰影和文字陰影

時間：2020-02-24來源：電腦系統城作者：電腦系統城

一、制作一個相片墻

二、

復制代碼

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            height: 400px;

            border:1px solid black;

            background-color: skyblue;

            margin-top:100px;

            text-align: center;/*這個屬性是用來表示給內部五張圖片是水平居中的*/

        }

        ul li {

            list-style:none;

            width: 150px;

            height: 200px;

            background-color: red;

            display:inline-block;

            transition:transform 1s;

            position:relative;/*使用相對定位，是想把圖片能夠置頂*/

            box-shadow: 0 0 10px;/*使圖片有陰影*/

?

        }

        ul li:nth-child(1){

            transform: rotate(30deg);

        }

        ul li:nth-child(2){

            transform: rotate(-30deg);

        }

        ul li:nth-child(3){

            transform: rotate(50deg);

        }

        ul li:nth-child(4){

            transform: rotate(-50deg);

        }

        ul li image{

            width: 150px;

            height: 200px;

            box-sizing:border-box;

?

        }

        ul li:hover{

            /*transform:rotate(0px);*/

            transform: scale(1.5);/*放大*/

            z-index: 998;

        }

</style>

</head>

<body>

<ul>

    <li><img src="image/play_tennis2.jpg" alt=""></li>

    <li><img src="image/play_tennis2.jpg" alt=""></li>

    <li><img src="image/play_tennis2.jpg" alt=""></li>

    <li><img src="image/play_tennis2.jpg" alt=""></li>

    <li><img src="image/play_tennis2.jpg" alt=""></li>

</ul>

</body>

</html>

復制代碼

二、盒子陰影和文字陰影

1.如何給盒子添加陰影

box-shadow: 水平偏移垂直偏移模糊度陰影擴展陰影顏色內外陰影（內陰影就是inset）

2.盒子的陰影分為外陰影和內陰影，默認情況下就是外陰影

3.陰影顏色如果不寫，那就默認是文字的顏色

4.省略的寫法：box-shadow:水平偏移垂直偏移陰影擴展；

5.如何給文字添加陰影

text-shadow:水平偏移垂直偏移模糊度陰影顏色；

復制代碼

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D173_ShadowOfBoxAndWord</title>

    <style>

        *{

            padding:0px;

            margin:0px;

?

        }

        div{

            height: 200px;

            width: 200px;

            margin:20px auto;

            background-color: red;

            border:1px solid black;

            text-align: center;

            line-height:200px;

            font-size:30px;

            box-shadow:10px 10px 10px 0px black;/*水平偏移  垂直偏移  模糊度  陰影擴展  陰影顏色  內外陰影*/

            text-shadow:3px 3px 3px blue;

        }

</style>

</head>

<body>

<div>我是盒子</div>

</body>

</html>

復制代碼

三、源碼：

D172_PhotoWall.html

D173_ShadowOfBoxAndWord.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D172_PhotoWall.html

https://github.com/ruigege66/HTML_learning/blob/master/D173_ShadowOfBoxAndWord.html

相關信息

2021-04-22
巧用 -webkit-box-reflect 倒影實現各類動效(小結)
2021-04-22
HTML+CSS+JS實現圖片的瀑布流布局的示例代碼
2020-03-04
HTML5 video自定義視頻播放器

HTML5之audio屬性
audio主要支持的音頻格式：mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body>  <a...

2020-03-04
HTML連載72-動畫效果及其他屬性
一、動畫效果 1.過渡與動畫相類似，都需要三要素，那么他們的區別在哪里呢？ ?答：過渡必須是人為的觸發才會執行動畫，動畫不需要人為的觸發就可以自動執行?動畫。 2.?相同點：（1）過度和動畫都是用來給元素添加動畫的；（2）過渡...

2020-03-04

熱門系統總排行

裝機必備

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

jlzzjlzz亚洲乱熟在线播放