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

時間 2020-02-24

標籤 html 連載相片盒子陰影文字欄目 HTML 简体版

原文原文鏈接

1、製做一個相片牆html

2、 git

<!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>

2、盒子陰影和文字陰影github

1.如何給盒子添加陰影微信

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

2.盒子的陰影分爲外陰影和內陰影，默認狀況下就是外陰影大數據

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

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

5.如何給文字添加陰影.net

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

 

<!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>