使用css设置div块实现阴影呈现3d效果
最近闲来无聊,突然想着,自己在项目中,有的时候会需要一些稍微炫酷点的界面实现,然后当时也都是为了把效果实现,然后也没有认真的去研究学习,所以很多时候都是这个任务完成了,也就完成了。没有把相应的知识点给认真研究学习和巩固。
前几天项目中用到的一个就是要实现界面的某个模块呈现阴影,这样给人有种3d的感觉,然后当时主要用到的点其实就一个:box-shadow,这个css的属性,也是自己第一次用到的,当时因为自己懒也就没有认真学习了。现在就把该点好好记录下来。
box-shadow:
属性说明:它可以设置一个或者多个下拉阴影的框
语法:box-shadow:h-shadow v-shadow blur spread color inset
注意:该属性把一个或者多个下拉阴影添加到框上,该属性是一个用逗号分隔阴影的列表,每个阴影由2-4个长度值,一个可选的颜色值和一个可选的inset关键字来规定。
属性值参数说明:
h-shadow:必需的,水平阴影的位置,允许为负值
v-shadow:必需的,垂直阴影的位置,允许为负值
blur:可选,模糊距离
spread:可选,阴影的大小
color:可选,阴影的颜色
inset:可选,从外层的阴影(开始时)改变阴影内侧阴影
如上图所示:即用了box-shadow了。源码为:
box-shadow:red 0px 0px 10px
好了,今天暂时先写到这了。方便以后自己获取其他有类似需求的人用到
使用css设置div块实现阴影呈现3d效果相关推荐
- css设置div水平居中方法
CSS设置div水平居中的方法: 1.给div元素设置"margin: 0 auto"样式: 2.在父级div元素里设置"text-align: center" ...
- css设置div不可编辑,css 怎么设置div不可点击
css设置div不可点击的方法:1.通过"event.preventDefault()"方法取消事件的默认动作:2.通过"event.stopPropagation()& ...
- html内容超出不自动滚动,css设置div滚动条内容不超过就不显示
css设置div滚动条内容不超过就不显示 实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示 ...
- html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇 在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
- 在HTML中让边框变透明,如何用CSS设置DIV边框透明
如何实现用CSS设置DIV边框为透明呢?我们来看一看. 工具/材料 电脑 操作方法 01 透明一般认为是一种颜色属性,但是并没有这个数值.我们找到了一种让div实现透明的最佳方案,运用RGBA 02 ...
- css设置div上下左右均居中 、底部居中
css设置div或盒子居中 #垂直居中 #左右居中 #底部居中 类型一:固定宽度高度 html代码 <div class="login_container"><d ...
- HTML如何修改span里面的字体颜色,怎么用span css设置div内部分字体颜色?
本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 用span标签设置div内放一段文字中的部分文字字体颜色方 ...
- html圆点边框颜色,css设置div边框颜色
div边框色调 css设置装备摆设div边框色采 使用css对div边框设置色采是思空见贯CSS花式设置装备摆设.对div边框颜色设置说需要css单词为border. 去领会干系教程:<CSS边 ...
- 设置div底部边框阴影
设置div底部边框阴影: div{-webkit-box-shadow:0px 1px 1px #de1dde;-moz-box-shadow:0px 1px 1px #de1dde;box-shad ...
最新文章
- HTC Element Behaviors in Internet Explorer.
- Python+Flask+Echart+WordCloud:豆瓣爬虫项目的可视化数据
- 经典C语言程序100例之九八
- javascript正则表达式(一)
- san框架计数的textarea
- 模板方法模式(Template Method Pattern)
- linux初识到入门_系统
- .NET C#到Java没那么难,MVC篇
- python实现归并算法
- 四大家族机器人资料免费送!赶快来下载
- 常用电子元器件之一:开关
- 18道kafka高频面试题哪些你还不会?(含答案和思维导图)
- 运筹学 matlab实现单纯形法
- 游戏对战平台研究终结
- 动手下载网易课程视频 -- 正式下载
- 微电影宣传片制作步骤分享。
- matlab生成任意区间的随机数
- Shopify payments二次验证
- [黑科技] WPS通过VB宏函数实现自编号功能
- xShow@Home v5.1.20120908 发布