前端|CSS盒阴影和文字阴影

简介: 前端|CSS盒阴影和文字阴影

问题描述

在一个网页当中,要丰富一些图形、边框或者文字等的立体效果和层次感的时候,可以用阴影的方式来呈现。而在CSS3当中,就有box-shadow,text-shadow这样两个属性来展示出阴影的效果。

解决方案

首先,需要熟悉和了解box-shadow,text-shadow这两个属性的基本语法和常见用法。这里简单的概括一下本次案例所需的几个用法,若想了解更多,请大家自行搜索查找更详尽的用法。

box-shadow语法:box-shadow:h-shadow v-shadow blur spread color inset;text-shadow的语法类似于box-shadow,只是缺少spreadinsert两个描述值。

而其中需要注意的是,盒阴影可以通过添加一个insert值,使外部阴影变为内部阴影。

解决步骤:

1.盒阴影

盒阴影的呈现方式是多样的,可以是图标、图形增加外部阴影,或者呈现发光样式等,这里介绍一个十分常见的案例——遮罩层,我们可以设置合适的参数来模拟一个半透明遮罩层的样式。

由于是模拟样式,则只需要模拟一个盒子为遮罩层,设置颜色参数为0(透明效果)的阴影。

代码如下:

div{

   width:200px;

   line-height:200px;

   margin:50px;

   box-shadow: 0 0 0 1920px rgba(0, 0, 0, .5);  //宽度设置为页面宽度

}

效果图:

2.文字阴影

文字阴影的效果可以直接使用一次这个属性来调参数呈现阴影效果,还可以用多重效果叠加来呈现。

代码如下:

div{

   width:200px;

   font-size:50px;

  color:hsl(0,  0%, 60%);

   text-shadow:

     1px 1px 0 hsl(0, 0%, 65%),

     2px 2px 0 hsl(0, 0%, 70%),

     3px 3px 0 hsl(0, 0%, 75%),

     4px 4px 0 hsl(0, 0%, 80%),

     5px 5px 0 hsl(0, 0%, 85%);

}

效果图:

结语

CSS3中的阴影属性,可以呈现的样式和层次感是十分丰富的,比如一个发光体,模糊字体,立体图标等样式都是在网页当中十分常见的,希望通过以上的简单介绍,能够启发读者更多的思考。


目录
相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
30天前
|
前端开发 UED 开发者
精通 CSS 阴影效果:从基础到高级应用
本文详细介绍了CSS阴影效果的使用方法,包括`box-shadow`和`text-shadow`的基本语法、参数解释及进阶应用。通过多个示例展示了如何实现外阴影、内阴影、渐变阴影以及多重阴影效果,并结合实际场景如浮动按钮和卡片式设计,说明了阴影与背景的综合应用。此外,还提供了性能优化建议,帮助开发者在确保视觉效果的同时提升页面性能。最后,总结了CSS阴影的重要性及其对网页美观度和用户体验的提升作用。
214 6
|
1月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
53 1
|
1月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
|
3月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
43 6
|
3月前
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
49 6
|
3月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
35 1
|
3月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
77 4
|
4月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
553 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡