阴影 box-shadow(一)
阴影 box-shadow(一)
box-shadow是向盒子添加阴影。支持添加一个或者多个。
很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法:
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
参数介绍:
注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。
为元素设置外阴影:
示例代码:
.box_shadow{
box-shadow:4px 2px 6px #333333;
}
效果:
为元素设置内阴影:
示例代码:
.box_shadow{
box-shadow:4px 2px 6px #333333 inset;
}
效果:
添加多个阴影:
以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可。如:
.box_shadow{
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}
效果:
阴影 box-shadow(一)的更多相关文章
- OpenGL阴影,Shadow Volumes(附源程序,使用 VCGlib )
实验平台:Win7,VS2010 先上结果截图: 本文是我前一篇博客:OpenGL阴影,Shadow Mapping(附源程序)的下篇,描述两个最常用的阴影技术中的第二个,Shadow Volu ...
- OpenGL阴影,Shadow Mapping(附源程序)
实验平台:Win7,VS2010 先上结果截图(文章最后下载程序,解压后直接运行BIN文件夹下的EXE程序): 本文描述图形学的两个最常用的阴影技术之一,Shadow Mapping方法(另一种是Sh ...
- OpenGL 阴影之Shadow Mapping和Shadow Volumes
先说下开发环境.VS2013,C++空项目,引用glut,glew.glut包含基本窗口操作,免去我们自己新建win32窗口一些操作.glew使我们能使用最新opengl的API,因winodw本身只 ...
- 阴影锥(shadow volume)原理与展望
转记:找了不少关于shadow volume原理的资料,还是这个帖子讲解的一目了然,转帖在这里,方便查阅.引用链接:http://blog.donews.com/yyh/archive/2005/05 ...
- 分享div、text、Box Shadow(阴影)演示及代码的页面
附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html
- (转)阴影锥(Shadow Volume)
转自:http://blog.csdn.net/zjull/article/details/11819923 Shadow Map和Shadow Volume是当今比较流行的实时阴影渲染方法,跟Sha ...
- 如何设置box shadow的透明度
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...
- [UWP]使用GetAlphaMask和ContainerVisual制作长阴影(Long Shadow)
1. 什么是长阴影 前几年扁平化设计(Flat Design)十分流行,后来在扁平化的基础上又流行起了长阴影(Long Shadow).长阴影其实就是扩展了对象的投影,感觉是一种光线照射下的影子,通常 ...
- LESS CSS 实例
值得参考的 10 个 LESS CSS 实例 2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...
- 转:体积阴影(Shadow Volumes)生成算法
下面以最快的速度简单谈谈阴影生成技术,目前普遍采用的一般有三种:Planar Shadow.Shadow Mapping和Shadow Volume,前者类似投影,计算最简单,缺点只能绘制抛射在平面上 ...
随机推荐
- jQuery--each遍历使用方法
定义和用法 each() 方法规定为每个匹配元素规定运行的函数. 提示:返回 false 可用于及早停止循环. 语法 $(selector).each(function(index,element)) ...
- 一分钟学会(一):.NET之正则表达式
本文介绍正则表达式在.NET中的基本应用,代码简单粗暴,实例浅显易懂,让你一分钟快速上手正则(大鸟请略过). 本文为入门文章,很多时候我们只是忘记了语法,这也可作为一个快速查询的参考. 如果想深入学习 ...
- 第四章_PHP基本语法(2)
1.常量的声明 在PHP中,定义常量使用define()函数来实现 2.魔术常量 名称 作用 __LINE__ 返回文件中的当前行号 __FILE__ 返回该文件的完整路径和文件名 __DIR__ 返 ...
- HTML5 <meta> 标签属性,所有meta用法都在这里了
基本标签SEO 优化为移动设备添加 viewportWindows 8其他 禁止数字识自动别为电话号码不让android识别邮箱每 8 秒刷新一次页面移动端的头部标签和meta 基本标签 声明文档使用 ...
- URI中的常用属性
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA00AAACDCAIAAADea2ciAAAgAElEQVR4nOz9eTxU////j8/Y930pIb
- Objective-C控制语句
Objective-C控制语句有以下三类: 分支语句:if-else,switch 循环语句:while,do-while,for 与程序转移相关的跳转语句:break,continue,goto. ...
- [原]Python Web部署方式总结
不要让服务器裸奔 学过PHP的都了解,php的正式环境部署非常简单,改几个文件就OK,用FastCgi方式也是分分钟的事情.相比起来,Python在web应用上的部署就繁杂的多,主要是工具繁多,主流服 ...
- linux服务方式启动程序脚本(init.d脚本)
这才是真正正确的让jar后台启动的脚本,网络上的各种nohoup的脚本都是临时执行一次任务用的. #!/bin/sh # # init.d script # # ### BEGIN INIT INFO ...
- wordpress设置导航栏
设置导航栏,首先你要设置你的导航分类.登陆后台---文章---分类目录,首先在这里输入你要写入导航的标题. 设置好后点击---外观---菜单这个地方就可以具体的设置导航的排序和下拉等二级
- PHP加密解密函数
<?php/***功能:对字符串进行加密处理*参数一:需要加密的内容*参数二:密钥*/function passport_encrypt($str,$key){ //加密函数 srand((do ...