当前位置：首页 > 网页制作 > 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>