首页 css 正文

我要投稿

阴影css3 阴影css3-CSS3中内阴影和外阴影的用法

bendan520 css

2023-08-26 0 2,051 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

本文的目标：

1.掌握CSS3中内阴影和外阴影的用法

问题：

1、需要使用纯DIV+CSS才能达到以下效果

附加信息：

1.效果中学水平阴影大小为4，垂直阴影为2，模糊为6

2.效果中学水平阴影为0，垂直阴影为0，模糊度为30

3.整体长度800px，居中

4.图片大小为180px，高度也为180px

思路分析：

1. 创建 2 个列表阴影css3，每个列表都有一个标题

2.第一个列表显示4张图片，每张图片必须有外阴影效果

3.第二个列表显示4张图片，每张图片必须有内阴影效果

具体实现如下：

1、准备素材，一张张柏芝的图片，在根目录下创建图片，将素材倒入其中，方便图片管理

2、创建index.html，先编写框架

3. 填写详细信息并写入相关元素

分析：

1.创建列表，我们通常使用ul

2.我们将第一个列表的阴影功效命名为boxshadow1

3、根据疗效可以看到每个li都需要float，所以需要单独添加一个clearli，这样ul才能将浮动的li包裹在上面

4、最后一列不需要margin-left进行特殊样式处理，所以样式名称我们命名为lastitem，这样方便单独给它设置样式

5.因为我们发现，虽然两个列表的样式类似，但是唯一的区别就是阴影的效果不同，所以在创建第二个列表的时候，可以直接复制第一个列表，但是里面的li的样式第二个列表称为 boxshadow2

最终代码如下：

4. 写作风格

在根目录下创建一个css目录，在上面新建一个index.css，上面的样式怎么写

思路分析：

.容器分析

1、通常在最里面的容器中，我们可以给上面所有的子元素定义一些通用的属性，比如padding:0，margin:0，这样可以防止有些元素有默认的padding和margin，影响我们的思维

所以在index.css中添加代码如下：

.container *{
    padding:0;
    margin: 0;
}

p段分析

1. 文字要居中

所以在index.css中添加代码如下：

p{ text-align: center; }

ul分析

1、根据要求，ulwidth=800px，同时必须居中（margin:0auto）。为了方便达到居中的效果，我们给它设置了一个border:1pxsolidred

所以在index.css中添加代码如下：

.shadow{
    width:800px;
    margin:10px auto;
    border:1px solid red;
}

乌利的解剖

1、根据要求，图片尺寸为180，我们可以设置li的长度为180，高度=180，显示为正圆。由于是横向排列的，float: left，没有黄点，所以list-style: none，

之后右边的宽度就是800-(180*4)=80，那么80/3约等于26.6，即margin-right: 26.6

2.但是最后一张图片位于li中，并且没有margin-right，所以需要为li.lastitem单独设置

3、为了让ul仍然包裹上面的li，我们需要清理最后一列li.clear的浮动，并且li的宽和高必须为0

所以在index.css中添加代码如下：

.shadow li{
    list-style: none;
    float: left;
    width: 180px;
    height: 180px;
    margin-right: 26.5px;
    
}
.shadow li.lastitem{
    margin-right: 0;
}
.shadow li.clear{
    clear: both;
    float: none;
    width: 0;
    height: 0;
}

图像分析

1、要以180显示图片，只需设置width:100%即可，这样图片的宽度=其所在li的宽度

所以在index.css中添加代码如下：

.shadow li img{width:100%;}

阴影解剖

1、根据要求已知外阴影的疗效。 box-shadowx-shadow: 4pxy-shadow: 2px 模糊度=6px，颜色为#333333，名称为boxshadow1

2.根据需求知道内阴影的效果，box-shadowx-shadow: 0y-shadow: 0，模糊30px，颜色一样，名字叫boxshadow2

所以在index.css中添加代码如下：

.boxshadow1{box-shadow:4px 2px 6px #333333; }
.boxshadow2{
    box-shadow: 0px 0px 30px  #333333 inset;
}

好了，到此为止，我们能想到的样式都写完了，最后根据结果进行修改和调整。至此index.css最终代码如下

.container *{
    padding:0;
    margin: 0;
}
p{ text-align: center; }
.shadow{
    width:800px;
    margin:10px auto;
    border:1px solid red;
}
.shadow li{
    list-style: none;
    float: left;
    width: 180px;
    height: 180px;
    margin-right: 26.5px;
    
}
.shadow li.lastitem{
    margin-right: 0;
}
.shadow li.clear{
    clear: both;
    float: none;
    width: 0;
    height: 0;
}
.shadow li img{width:100%;}
/* 阴影 */
.boxshadow1{box-shadow:4px 2px 6px #333333; }
.boxshadow2{
    box-shadow: 0px 0px 30px  #333333 inset;
}
.shadow li img{width:100%;}

5.取出来，我们将样式文件导入到index.html中

运行效果如下：

根据结果，如果我们仔细观察，我们会发现第一个疗效符合我们的意图，但第二个内影疗效却没有实现。为什么？

样式过时了吗？拿出来稍微改一下代码，去掉最后一张图看看

运行效果如下：

解释一下什么？解释一下，样式可能是对的，确实是内影的疗效阴影css3，以及为什么加了图片后看不到内影的疗效，这里是重点

当要为图片设置内阴影时，如果只设置图片内层的容器阴影，其阴影效果会被图片遮挡，所以需要设置position:relative;z-index: -1; 为了图片

拿出来我们试试吧。更改index.css中的img样式如下：

.boxshadow2 img{
    position: relative;
    z-index:-1;
    width: 100%;
}

然后再次运行：

我们发现内阴影的疗效已经下来了，所以我们可以把它捡起来，去掉黑边，恢复上一张图

index.css修改后的代码

.container *{
    padding:0;
    margin: 0;
}
p{ text-align: center; }
.shadow{
    width:800px;
    margin:10px auto;
    /* border:1px solid red; */
}
.shadow li{
    list-style: none;
    float: left;
    width: 180px;
    height: 180px;
    margin-right: 26.6px;
    
}
.shadow li.lastitem{
    margin-right: 0;
}
.shadow li.clear{
    clear: both;
    float: none;
    width: 0;
    height: 0;
}
.shadow li img{width:100%;}
/* 阴影 */
.boxshadow1{box-shadow:4px 2px 6px #333333; }
.boxshadow2{
    box-shadow: 0px 0px 30px  #333333 inset;
}
.boxshadow2 img{
    position: relative;
    z-index:-1;
    width: 100%;
}

index.html代码如下：