css阴影效果,如图所示的阴影效果怎么实现

发布网友发布时间：2022-04-06 10:33

共1个回答

热心网友时间：2022-04-06 12:03

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3实现的各种阴影效果</title>
<style>
body {
padding: 20px 0 0;
font: 14px/1.5 Arial, sans-serif;
text-align: center;
color: #333;
background: #FAF0D9;
}

a {
font-weight: bold;
color: #346AA8;
}

a: hover,
a: focus,
a: active {
text-decoration: none;
}

.container {
position: relative;
z-index: 1;
width: 600px;
padding: 20px;
margin: 0 auto;
background: #FAF0D9;
}

.container: after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
font-size: 0;
}
/* Shared styles*/

.drop-shadow {
position: relative;
float: left;
width: 40%;
padding: 1em;
margin: 2em 10px 4em;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow: before,
.drop-shadow: after {
content: "";
position: absolute;
z-index: -2;
}

.drop-shadow p {
font-size: 16px;
font-weight: bold;
}
/* Lifted corners*/

.lifted {
-moz-border-radius: 4px;
border-radius: 4px;
}

.lifted: before,
.lifted: after {
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
max-width: 300px;
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}

.lifted: after {
right: 10px;
left: auto;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
/* Curled corners*/

.curled {
border: 1px solid #efefef;
-moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
border-radius: 0 0 120px 120px / 0 0 6px 6px;
}

.curled: before,
.curled: after {
bottom: 12px;
left: 10px;
height: 55%;
max-width: 200px;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-webkit-transform: skew(-8deg) rotate(-4deg);
-moz-transform: skew(-8deg) rotate(-4deg);
-o-transform: skew(-8deg) rotate(-4deg);
transform: skew(-8deg) rotate(-4deg);
}

.curled: after {
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(4deg);
-moz-transform: skew(8deg) rotate(4deg);
-o-transform: skew(8deg) rotate(4deg);
transform: skew(8deg) rotate(4deg);
}
/* Perspective*/

.perspective: before {
left: 80px;
bottom: 8px;
width: 50%;
height: 35%;
max-width: 200px;
-webkit-box-shadow: -80px 5px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -80px 5px 8px rgba(0, 0, 0, 0.4);
box-shadow: -80px 5px 8px rgba(0, 0, 0, 0.4);
-webkit-transform: skew(50deg);
-moz-transform: skew(50deg);
-o-transform: skew(50deg);
transform: skew(50deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}

.perspective: after {
display: none;
}
/* Raised shadow - no pseudo-elements needed*/

.raised {
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
/* Curved shadows*/

.curved: before {
top: 10px;
bottom: 10px;
left: 0;
right: 50%;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
-moz-border-radius: 10px / 100px;
border-radius: 10px / 100px;
}

.curved-vt-2: before {
right: 0;
}

.curved-hz-1: before {
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}

.curved-hz-2: before {
top: 0;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
/* Rotated box*/

.rotated {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}

.rotated: first-child: before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7489188-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.async = true;
ga.src = 'http://www.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>

<body>
<div class="container">
<h1><a href="/css-drop-shadows-without-images/">CSS drop-shadows without images</a></h1>
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>
<div class="drop-shadow curled">
<p>Curled corners</p>
</div>
<div class="drop-shadow perspective">
<p>Perspective</p>
</div>
<div class="drop-shadow raised">
<p>Raised box</p>
</div>
<div class="drop-shadow curved curved-vt-1">
<p>Single vertical curve</p>
</div>
<div class="drop-shadow curved curved-vt-2">
<p>Vertical curves</p>
</div>
<div class="drop-shadow curved curved-hz-1">
<p>Single hozitonal curve</p>
</div>
<div class="drop-shadow curved curved-hz-2">
<p>Horizontal curves</p>
</div>
<div class="drop-shadow lifted rotated">
<p>Rotated box</p>
</div>
</div>
</body>

</html>
自己可以模仿成自己的效果

css怎么设置阴影效果css怎么设置阴影效果图

1、要设置h3的style以此来添加text-shadow，这个就是文字的阴影了哦。它的参数分别表示阴影的水平距离，垂直距离以及模糊程度和阴影的颜色了。2、前两个数值越大距离原来文字的距离就会越远哦。而第三个值越大那么阴影就会越模糊哦。3、p元素添加阴影效果也是差不多的情况，不过用到的是box-shadow属性...

css怎么设置阴影css怎么设置阴影效果

1、首先新建一个html文件，输入基本的内容，这里设置一个p，并把它的class设置为demo，用浏览器打开看看默认的效果。2、设置p的样式，这里给p300px的宽度。用border-bottom属性，设置底框为3像素，用实线框，颜色偏红色，设置完成后保存查看效果。3、继续对边框美化，用box-shadow属性加入阴影效果，4个...

CSS中添加阴影的方法有哪些

filter: drop-shadow(左右的阴影上下的阴影模糊距离阴影颜色);左右位置以及上下位置是指定原始图像的阴影位置的数字。模糊条件指定轮廓的阴影的模糊程度，所有的单位都是pxdrop-shadow与box-shadow的最大区别在于，您可以根据图像的大小设置阴影。显示box-shadow和drop-shadow之间的差异：这是一种非常有用...

css如何实现比普通阴影更加立体的阴影效果?

实现更加立体的阴影效果，可以通过多种方法。一种方法是使用多层阴影叠加实现元素的立体阴影。另一种方法是通过伪元素和变换属性（如transform: skew()）来生成长投影效果。例如，可以为一个矩形元素添加两个伪元素，通过变换属性和背景色变化来实现长投影。对于所谓的“立体投影”，其实指的是通过其他元素...

手把手教你使用CSS3为文本和元素实现添加阴影效果

-webkit-text-shadow 或 -moz-text-shadow 文本阴影与元素阴影文本阴影可以通过text-shadow属性实现，如2px水平和2px垂直偏移的黑色阴影:text-shadow: 2px 2px black; 而对于元素，可以使用box-shadow属性，例如一个黄色元素带有模糊的红/灰阴影:box-shadow: 0 0 4px red, 0 0 4px gray; ...

CSS 阴影怎么写?

回答：滤镜或者位置偏移等办法。代码查询网上相关资料吧

如何用 CSS 中写出超级美丽的阴影效果?

要打造超级美丽的CSS阴影效果，关键在于理解其在营造网页真实感和深度错觉中的作用。阴影不仅用于突出元素，还能引导用户注意力，创造触觉真实感。以下是实现这一目标的策略：首先，理解阴影的原理：阴影表示元素的高程，通过有策略地调整，可以模拟不同层次的错觉。例如，考虑光源位置，通常选择上方略偏左，...

CSS 样式实现单边阴影

在CSS中，通过box-shadow属性能够为元素添加阴影效果。若要实现单边阴影，你需要精确调整该属性的各个部分。首先，box-shadow接受四个值，分别对应水平偏移、垂直偏移、模糊半径和偏移量。这里我们有四个特定的类：.shadow-only-bottom 用于底部单边阴影，通过设置为 box-shadow: 0px 7px 7px -7px #5...

如何用 CSS 中写出超级美丽的阴影效果

设置共享光源、调整阴影比例以模拟高程，以及利用分层和颜色匹配来增强阴影的真实感。虽然这种技术可能增加渲染负担，但结果的视觉效果是值得的。最后，记住将阴影融入设计系统，使其与整体设计元素协调一致，例如使用CSS变量来控制阴影颜色。通过这种方式，阴影不仅可以提升视觉体验，还能与设计语言无缝融合。

CSS阴影详解

事实上，对于文字的阴影效果，我们完全可以用CSS来实现！可以查看查看demo 先。Text-shadowtext-shadow可以让我们实现完美的文字阴影效果。基本写法：text-shadow:[颜色 x轴 y轴模糊半径],[颜色 x轴 y轴模糊半径]...或者text-shadow:[x轴 y轴模糊半径颜色],[x轴 y轴模糊半径颜色]...

如图所示计算阴影部分的面积 css文字的阴影效果如图所示阴影部分是正方形如图所示求阴影部分面积 css阴影效果 css怎么设置div阴影如图所示求圆的半径 css图片阴影 css中图片添加阴影