HTML：
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3实现曲线阴影</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="wrap effect">
<h1>啦啦啦德玛西亚!!!!</h1>
</div>
<p>这是曲线阴影效果!!!!</p>
</body>
</html>
CSS：
*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
p{
font-size: 30px;
font-weight: bold;
margin: -30px 0 50px 0;
text-align: center;
}
.wrap
{
width: 50%;
height: 300px;
margin: 80px auto;
background: #fff;
}
/*包块的宽高,背景色及居中对齐*/
.wrap h1
{
font-size: 30px;
line-height: 300px;
text-align: center;
}
/*设置字体大小,对齐方式及行高(垂直居中)*/
.effect
{
position: relative;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
}
设置盒子外阴影和内阴影
可以使用十六进制颜色,若是需要用到透明度,建议用rgba box-shadow:h-shadow v-shadow blur spread color inset 必需：h-shadow(水平)，v-shadow（垂直） 可选：blur（模糊距离），spread（阴影尺寸），color（阴影颜色），inset（内阴影）
CSS：
.effect:after,
.effect:before
{
position: absolute;
z-index: -1;
top: 50%;
right: 30px;
bottom: 0;
left: 30px;
content: '';
border-radius: 100px/10px;//border-radius:x/y(水平半径/垂直半径)
box-shadow: 0 0 20px rgba(0, 0, 0, .8);
-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
}
相关推荐
此外，通过实际案例，读者将学习如何结合CSS3的新功能，如多列布局、渐变、阴影、边框半径、转换和动画，以提升网页的视觉效果和用户体验。 最后，"HTML5与CSS3设计模式"关注的是这两种技术的创新设计思路。设计...
CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效....
CSS3参考手册(css3语法使用查询手册)CHM版，可快速索引和搜索CSS3各种属性值以及具体的用法，说详细介绍有CSS3选择器的各方面知识，这包括UI元素状态伪类 E:checked、结构性伪类 E:nth-of-type(n)、子串匹配的属性...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
CSS3引入了多个新模块，如选择器（如:nth-child()、:not()等），多列布局，媒体查询（实现响应式设计），动画和过渡效果，以及阴影和渐变等视觉效果。CSS3的模块化设计允许开发者根据需求选择性地使用新特性，提高了...
高仿小米商城，纯HTML5和CSS3实现 高仿小米商城，纯HTML5和CSS3实现 高仿小米商城，纯HTML5和CSS3实现 高仿小米商城，纯HTML5和CSS3实现 高仿小米商城，纯HTML5和CSS3实现 高仿小米商城，纯HTML5和CSS3...
除此之外，CSS3的布局模式如Flexbox和Grid，为响应式设计提供了强大支持，可以轻松地实现多列布局和动态调整元素位置。 在提供的压缩包中，"4b7e90309dd742268ba11301ea9e8d39"这个文件可能包含了20个HTML5和CSS3的...
CSS3的3D变换是实现动态效果的关键。`transform`属性可以对元素应用2D或3D转换，包括旋转（`rotateX`, `rotateY`, `rotateZ`）、平移（`translateX`, `translateY`, `translateZ`）和缩放（`scaleX`, `scaleY`, `...
标签"css3-chart-window"可能指的是界面中包含了一个图表窗口，CSS3可以用于定制图表的样式，如数据点的形状、颜色，以及图表轴的样式。使用`linear-gradient`或`radial-gradient`可以创建独特的背景效果，增强图表...
一个css与css3都有效的code，如果浏览器不支持css3，那么只会以css的样式显示。最常见的就是圆弧角。一个只在css3中有效的code，如果浏览器不支持css3，那么其显示效果就不会出现。 css3和css，在编写code的时候，...
CSS3允许开发者使用选择器来精确地定位和操作元素，比如伪类选择器`:hover`、`:active`、`:focus`等，以及基于属性的选择器 `[attr=value]`。它还引入了多列布局（column-count、column-gap等），使得创建报纸样式的...
在本文中，我们将深入探讨如何使用CSS3来实现一个八方向云台遥控器的样式。云台遥控器是用于控制摄像头或类似设备在八个不同方向上移动的装置，这种功能通常应用于无人机、监控系统等领域。在网页开发中，通过CSS3...
之前我们分享过几款不错的CSS3 3D立体按钮，比如5组可爱CSS3按钮、CSS3灰色按钮菜单 超具3D立体感等。今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮，它在鼠标按下时不仅从视觉上感受到3D立体的效果，而且...
CSS3的transform属性允许我们改变元素的位置、大小和形状，包括旋转、缩放、平移和倾斜等效果。在本案例中，我们可能用到rotateX、rotateY和rotateZ来实现3D空间中的折叠动作。 过渡（transition）属性可以平滑地在...
Canvas火焰喷射动画效果，CSS3垂直图标菜单 带Tooltip提示框，CSS3多样式小图标按钮 带分享按钮，CSS3可视化网页编辑器 基于tinymce编辑器，CSS3实现一款联系表单 输入框带小图标，HTML5 Canvas模拟衣服撕扯动画 ...
网页动画素材 css3属性绘制圆形旋转的黑洞动画特效（抖音资料）网页动画素材 css3属性绘制圆形旋转的黑洞动画特效（抖音资料）网页动画素材 css3属性绘制圆形旋转的黑洞动画特效（抖音资料）网页动画素材 css3属性...
“第3章CSS3入门.pptx”和“第4章CSS3选择器.pptx”将引导你了解CSS3的基础语法和高级选择器，如伪类（:hover、:active、:focus等）、子元素选择器（>:child）、相邻兄弟选择器（+）等，这些工具可以帮助你更精确地...
此为《CSS3实战》的配套源码和插图，分三部分上传，此为第三部分。 《CSS3实战》由国内资深Web前端工程师撰写，权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者，那么《CSS 3实战》也许会让你在即将到来的Web...