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设计模式"关注的是这两种技术的创新设计思路。设计...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
《CSS3实用指南》源码是一份非常宝贵的资源，它涵盖了从第二章到第七章的全部CSS3实际应用示例。这份源码旨在帮助开发者深入理解CSS3的新特性，提升网页设计与布局的能力。以下是对这些章节中涉及的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`可以创建独特的背景效果，增强图表...
CSS3允许开发者使用选择器来精确地定位和操作元素，比如伪类选择器`:hover`、`:active`、`:focus`等，以及基于属性的选择器 `[attr=value]`。它还引入了多列布局（column-count、column-gap等），使得创建报纸样式的...
重点介绍如何使用DlV+CSS3进行网页布局，注重实战操作，使读者在学习CSS3技术的同时，掌握DIV+CSS3的精髓。还介绍了一些扩展知识，包括CSS3与JavaScript、XML等综台应用。最后给出5个综合实例，使读者进一步巩固所学...
CSS3的transform属性允许我们改变元素的位置、大小和形状，包括旋转、缩放、平移和倾斜等效果。在本案例中，我们可能用到rotateX、rotateY和rotateZ来实现3D空间中的折叠动作。 过渡（transition）属性可以平滑地在...
Canvas火焰喷射动画效果，CSS3垂直图标菜单 带Tooltip提示框，CSS3多样式小图标按钮 带分享按钮，CSS3可视化网页编辑器 基于tinymce编辑器，CSS3实现一款联系表单 输入框带小图标，HTML5 Canvas模拟衣服撕扯动画 ...
网页动画素材 css3属性绘制圆形旋转的黑洞动画特效（抖音资料）网页动画素材 css3属性绘制圆形旋转的黑洞动画特效（抖音资料）网页动画素材 css3属性绘制圆形旋转的黑洞动画特效（抖音资料）网页动画素材 css3属性...
此为《CSS3实战》的配套源码和插图，分三部分上传，此为第三部分。 《CSS3实战》由国内资深Web前端工程师撰写，权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者，那么《CSS 3实战》也许会让你在即将到来的Web...
例如，可以使用`:hover`伪类改变鼠标悬停在刮刮乐区域时的视觉反馈，或者使用CSS3的transition和animation属性创建动态效果。 在这个实例代码中，`09_canvas_guaguale`可能是一个包含具体实现的文件，可能包括HTML...
css3官方帮助文档中文版
此为《CSS3实战》的配套源码和插图，分三部分上传，此为第一部分。 《CSS3实战》由国内资深Web前端工程师撰写，权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者，那么《CSS 3实战》也许会让你在即将到来的Web...
在登录界面的设计中，CSS3还提供了动画和过渡效果，如`transition`可以实现鼠标悬停时的平滑变换，`animation`则能创建复杂的动态效果，增强用户的交互体验。另外，响应式设计是必不可少的，使用媒体查询(`media ...
此为《CSS3实战》的配套源码和插图，分三部分上传，此为第二部分。 《CSS3实战》由国内资深Web前端工程师撰写，权威性毋庸置疑。如果你是一位有前瞻性的Web前端工作者，那么《CSS 3实战》也许会让你在即将到来的Web...
CSS3则带来了更多样式控制和动画效果，比如选择器的扩展（如:nth-child()，:hover，:active等），允许更精确地定位元素；盒模型的改进，如Flexbox和Grid布局，提供了更灵活的页面布局方式；以及过渡（transition）和...