展会搭建设计案例网站,网站平台建设哪家公司好,信息发布平台,以图搜图百度识图总第 007 篇文章#xff0c; 查看专栏目录 本专栏记录的是经常使用的CSS示例与技巧#xff0c;主要包含CSS布局#xff0c;CSS特效#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点#xff0c;CSS特效主要是一些动画示例#xff0c;CSS花… 总第 007 篇文章 查看专栏目录 本专栏记录的是经常使用的CSS示例与技巧主要包含CSS布局CSS特效CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点CSS特效主要是一些动画示例CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录、展示、分享希望能给您带来帮助。 文章目录 效果图源代码CSS基础知识点结尾语 css实战中怎么绘制3D文字呢 实际上理论很简单使用text-shadow根据需要调整阴影的颜色、大小、偏移量等参数以达到你想要的立体效果。下面是一个简单的示例。关键点就是知道如何设置text-shadow。
效果图 源代码
/*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2023-11-13
*/
templatediv classcontainerdiv classtoph3绘制3D文字类似PS效果/h3div classauthor大剑师兰特, 还是大剑师兰特gis-dajianshi/div/divdiv classdajianshi demo1大剑师/divdiv classdajianshi demo2兰特/divdiv classdajianshi demo3大剑师/div/div
/templatestyle scoped.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: orangered;color: #fff;}.dajianshi {font-size: 100px;text-align: center;}.demo1 {color: #eee;text-shadow: 1px 1px rgba(197, 223, 248, 0.8), 2px 2px rgba(197, 223, 248, 0.8), 3px 3px rgba(197, 223, 248, 0.8), 4px 4px rgba(197, 223, 248, 0.8), 5px 5px rgba(197, 223, 248, 0.8), 6px 6px rgba(197, 223, 248, 0.8);}.demo2 {color: #fff;text-shadow: -1px -1px rgba(197, 223, 248, 0.8), -2px -2px rgba(197, 223, 248, 0.8), -3px -3px rgba(197, 223, 248, 0.8), -4px -4px rgba(197, 223, 248, 0.8), -5px -5px rgba(197, 223, 248, 0.8), -6px -6px rgba(197, 223, 248, 0.8);}.demo3 {color: #f0f;text-shadow: 3px 3px 0 rgba(180, 255, 0, 0.5);}
/style
CSS基础知识点 1.CSS样式表 2.基础选择器1标签选择器2类选择器3id选择器4通配符选择器 3.复合选择器1后代选择器2子选择器3并集选择器4交集选择器5伪类选择器。 4.字体样式属性1字体大小font-size2字体类型font-family3字体粗细font-weight4字体风格font-style 5.文本外观样式1设置文本颜色color2word-spacing3letter-spacing4line-height5text-transform6text-decoration7text-align8text-indent9white-space 6.文本外观属性1text-shadow2overflow 7.CSS层叠性、继承性及优先级 8.边框介绍 8.1边框属性1border-style2border-width3border-color4border-radius 8.2内边距属性 8.3外边距属性 8.4box-shadow 9.背景属性 9.1背景颜色 9.2背景图片1background-repeat2background-position3background-attachment4background-size5background-origin6background-clip7复合写法8不透明 10.元素的类型 11.span标签 12.display 13.表格标签1table标签2tr标签3td标签4th标签5表格边框6折叠边框7表格宽度和高度8表格边框间距border-spacing9表格标题位置caption-side 14.表单 14.1创建表单1标签 14.2表单控件1input控件2input/标签的type属性3textarea控件4select控件 15.CSS盒子模型1边框border2内边距(padding)3外边距margin4清除内外边距5盒子模型 16.浮动布局1传统网页布局2浮动简介3浮动特性4清除浮动 17.定位布局1定位组成2相对定位relative3绝对定位absolute4子绝父相5固定定位fixed6定位叠放次序z-index7定位拓展 三.其他 1.圆角边框1圆形2圆角矩形 2.盒子阴影 3.文字阴影 4.用户界面样式1鼠标样式 cursor2轮廓线 outline3防止拖拽文本域 resize 5.过渡 transition 结尾语
CSS的应用无处不在希望某个片段就能帮助你欢迎学习GIS的朋友一起交流。 《 Openlayers 综合示例200 》 《 leaflet示例教程100 》 《 Cesium示例教程100》 《MapboxGL示例教程100》。
