css样式阴影效果,css设置阴影

CSS 如何实现让div的四个边框都有阴影的效果？

CSS 实现让div的四个边框都有阴影的效果：

首先：

HTML代码

h1CSS 如何实现让div的四个边框都有阴影的效果？/h1

div class="g1"

div class="g2"/div

/div

CSS代码

body{background:#f00;}

html{background:#f00;}/*html加背景色*/

.g1{

width:500px;

height:500px;

border:2px solid #fff;

margin:30px auto;

background-color:#fff;

box-sizing:border-box;

}

.g2{

width:400px;

height:400px;

margin:50px auto;

border:2px solid #000;

box-shadow:5px 5px 5px #000,5px -5px 5px #000,-5px 5px 5px #000,-5px -5px 5px #000;

}

具体效果：

相关问答

Q1: CSS 阴影怎么写？

浏览器兼容性差，滤镜一般很少去用的，不过半透明等除外，那些可以通过兼容的css来控制

Q2: 用 CSS 设计漂亮的阴影，css阴影和原理，所有知识点多图动画演示

以我的拙见，好的网站和 Web 应用程序应具有“真实”品质，实现这种效果涉及很多因素，但阴影是一个重要因素。

但是，当我浏览互联网时，各大网站大多数阴影都很虚假，布局盒子被模糊的灰色框覆盖，看起来并不像阴影。

本文讨论的就是如何将常见的阴影转换为美丽的、栩栩如生的阴影：

阅读受众

阴影意味着海拔，更大的阴影意味着更高的海拔。

如果我们有策略地使用阴影，我们可以创造深度视觉，就好像页面上的元素在不同层次上，并且漂浮在背景之上。

例子：

使用阴影的目的：要么增加特定元素的显着性，要么让应用程序感觉更触手可及、栩栩如生。

当我想为一个元素添加阴影时，我会添加`box-shadow并修改值，直到得到我喜欢结果。

问题是： 如果孤立地创建每个阴影，你会得到一堆不协调的阴影。如果我们的目标是创造深度视觉，我们需要每个阴影都相互配合。否则，他们看起来就是一堆垃圾：

在自然界中，阴影是光投射出来的。阴影的方向取决于灯光的位置：

一般来说，我们应该为页面上的所有元素确定一个单一的光源，通常位于左上方：

如果 CSS 有一个照明系统，我们可以为所有元素指定同一个光源，可惜CSS 没有这样的东西。

我们通过指定水平偏移和垂直偏移来移动阴影。例如，在上图中，生成的阴影具有 4px 的垂直偏移和 2px 的水平偏移。

这是内聚阴影的第一个技巧： 页面上的每个阴影都应该共享相同的比例 。 这将使每个元素看起来都来自同一个光源。

为啥所有元素比例要一样？

为什么我建议对每个元素使用相同的比例，难道每个元素相对于光源的位置都是一样的吗？

为了便利性考虑，我们一般使用相同的角度，因为计算每个元素的角度很麻烦。

如何创造一种深度视觉？

查看演示，注意值是如何变化的：

前两个数字 - 水平和垂直偏移 - 一起缩放。垂直偏移始终是水平偏移的 2 倍，这里使用了相同的比例。

当卡片升高时，有两个变化：

从算法来讲，这里面又复杂的数学算法。

我们可以从人类常识来理解这件事：

如果您在光线充足的房间内，请将手按在桌子上，然后慢慢抬起。 注意阴影是如何变化的：它远离你的手（更大的偏移），它变得更模糊（更大的模糊半径），它开始逐渐消失（更低的不透明度）。

因为我们生活中有很多经验，所以我们不需要记住一堆规则。在设计阴影时，我们只需要 运用我们的常识 。

Blender 等现代 3D 插图工具可以使用 光线跟踪 技术产生逼真的阴影和照明。

在光线追踪中，数百束光从相机中射出，从场景的表面反射数百次。这是一种计算成本很高的技术；生成单个图像可能需要几分钟到几小时！

网络用户没有那种耐心，所以 box-shadow 算法要简陋得多，它只实现了基本的模糊算法。

因此， box-shadow 阴影永远没有照片逼真，但我们可以巧妙地优化： 分层 。

我们不使用单个 box-shadow，而是把多个阴影叠加起来，阴影之间的偏移量和半径略有不同：

Philipp Brumm 一个很棒的生成分层阴影工具： shadows.brumm.af ：

性能权衡

不可否认，分层阴影是美丽的，但它们确实需要付出代价。如果我们叠加 5 个阴影分层，我们的设备必须多做 5 倍的工作！

在好的硬件上不是什么大问题，但会减慢在较旧的廉价移动设备上的渲染速度。

到目前为止，我们所有的阴影都使用了半透明的黑色，比如 hsl(0deg 0% 0% / 0.4) 。这实际上并不理想。

当我们在背景颜色上叠加黑色时，不仅会使它变暗，也会使其饱和度降低很多。

比较这两个框：

左边的盒子使用了透明的黑色。右侧的框匹配颜色的色调和饱和度，但降低了亮度。我们得到了一个更有活力的盒子！

当我们为阴影使用较深的颜色时，会发生类似的效果：

但是，左边的饱和度太低，右边的 饱和度不够 ，感觉更像是光晕而不是阴影！

实验一下：

通过匹配色调并降低饱和度/亮度，我们可以创建一个真实的阴影，没有那种“褪色”的灰色质量。

饱和度和亮度的关系

如果您熟悉 hsl 颜色格式，就会知道饱和度和亮度是独立控制的。

那么，降低亮度似乎也对饱和度有影响是不是有点奇怪？

这个问题以后有时间给大家细讲。

在本文中，我们一直在使用 box-shadow 属性。 box-shadow 是一个很好的全面工具，但它不是我们在 CSS 中唯一的阴影选项。?

看看 filter: drop-shadow ：

语法几乎相同，但它产生的阴影不同。这是因为 filter 属性实际上是 SVG 过滤器的 CSS 挂钩。 drop-shadow使用 SVG 高斯模糊，这是一种与 box-shadow`不同的模糊算法。

两者之间还有一些其区别， drop-shadow 有一个超能力： 它能勾勒出元素的形状。

例如，如果我们在具有透明和不透明像素的图像上使用它，阴影将只对不透明像素起作用，也就是能勾勒出物体的轮廓：

请大喊一句：EDG NB!

这不仅适用于图像，它也适用于 HTML 元素！

希望能启发您，给您一些帮助！

Q3: CSS3阴影效果

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。

基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

box-shadow属性的参数设置取值：

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。

Q4: css3如何实现边框阴影

我们在制作网页的时候可以用CSS3添加边框，那么如果要给边框添加阴影该怎么做呢？下面我给大家分享一下。

工具/材料

SublimeText

首先打开Sublime Text软件，新建一个HTML文档，如下图所示

然后在html文档的Body区域插入一个div，如下图所示

接下来给div定义一些样式，注意其中的box-shadow就是定义边框阴影的，如下图所示

最后我们运行界面程序，你会看到边框已经被添加上阴影了，如下图所示