box-shadow大全

长木木木

已于 2024-05-22 11:24:00 修改

阅读量762

点赞数 5

分类专栏：基础知识文章标签： css3 前端

于 2024-05-22 09:21:14 首次发布

本文链接：https://blog.csdn.net/qq_43218075/article/details/84376976

版权

基础知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

外阴影：box-shadow: X轴 Y轴 Rpx color;
属性说明：阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小）阴影的颜色

内阴影：box-shadow: X轴 Y轴 Rpx color inset;
默认是外阴影内阴影：inset 可以设置成内部阴影

注:此属性使用于盒模型如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影如果设置文字阴影请参考知识点:text-shadow（同理）
因为是新属性，为了兼容各主流浏览器并支持这些主浏览器的较低版本，基于主流浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式
欧朋浏览器 -o-box-shadow IE>9 -ms-box-shadow
一、

box-shadow: 0 0 10px #f00 （因没有使其X轴与Y轴移动设置值所在会在本身发生作用半径范围，颜色）![在这里插入图片描述](https://img-blog.csdnimg.cn/20181123104141273.png

在这里插入图片描述

二、

box-shadow:4px 4px 10px #f00;与测试1不同 X轴与Y轴改变了正值（正值向右向下）所以变成了这样‍

在这里插入图片描述
三、

box-shadow:-4px -4px 10px #f00;与测试2不同之处是 X轴与Y轴改变成了负值（负值向左向上）所以变成了这样‍

在这里插入图片描述

四、
div{
margin:0 auto;
width:500rpx;
height:500rpx;
box-shadow:-4px 4px 10px #f00;
}

在这里插入图片描述
五、div{

margin:0 auto;
margin-top:50rpx;
width:300rpx;
height:300rpx;
box-shadow:4px -4px 10px #f00;
}
在这里插入图片描述
六、

<div  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/ 
                                                   0px -10px 10px #000,  /*上边阴影*/ 
                                                   10px 0px 10px green,  /*右边阴影*/ 
                                                   0px 10px 10px blue;" /*下边阴影*/ ></div>

在这里插入图片描述