阴影 box-shadow
语法:
box-shadow:none | <shadow> [ , <shadow> ]*
<shadow> = inset? && <length>{2,4} && <color>?
默认值:none
适用于:所有元素
继承性:无
动画性:是,除了内、外阴影切换时
计算值:指定值
取值:
- none:无阴影
- <length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
- <length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
- <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
- <length>④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
- <color>: 设置对象的阴影的颜色。
- inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
- <length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
说明:
设置或检索对象阴影。参阅 <' text-shadow '> 属性
- 可以设定多组效果,每组参数值以逗号分隔。
- 对应的脚本特性为boxShadow。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow 阴影</title>
<style type="text/css">
.sample{
width: 200px;
height: 300px;
background-color: #f1f1f1;
box-shadow: 50px 0px 0px 50px blue;
margin: 200px;
}
</style>
</head>
<body>
<div class="sample"></div>
</body>
</html>
阴影大小是在 水平偏移后 给 200px * 300px的 原DIV 增加的阴影边框。
不信? 你就把 水平偏移 设置为 0px 看看。
.sample{
width: 200px;
height: 300px;
background-color: #f1f1f1;
box-shadow: 0px 0px 0px 50px blue;
margin: 200px;
}
阴影 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,前者类似投影,计算最简单,缺点只能绘制抛射在平面上 ...
随机推荐
- MySQL数据库实例参数对比脚本
如何对比两个MySQL实例的参数情况,生产中常会有这样的需求,最近写了个python脚本,可基本实现该需求. 脚本 #!/usr/bin/python import MySQLdb,sys def f ...
- Java多线程系列--“JUC锁”01之 框架
本章,我们介绍锁的架构:后面的章节将会对它们逐个进行分析介绍.目录如下:01. Java多线程系列--“JUC锁”01之 框架02. Java多线程系列--“JUC锁”02之 互斥锁Reentrant ...
- X240 Win10企业版 14279版本 电池标尺白底问题
win10系统更新到14279版本: 电池标尺显示白底,而且右键也不可打开"启动电池管理器-" (1)首先安装lenovo settings 下载地址:http://think.l ...
- Cache-Aside Pattern(缓存模式)
Load data on demand into a cache from a data store. This pattern can improve performance and also he ...
- mongodb安装配置
下载安装 官网下载地址:https://www.mongodb.com/download-center 执行msi文件. 环境配置 可以参照我的步骤来进行配置,目录根据个人需要设置. 解压安装包到D: ...
- asp.net <asp:Content>控件
<asp:Content ID="Content2" ContentPlaceHolderID="CPH_MainContent" runat=" ...
- 纯css3天气动画场景特效
CSS3超强大,以下是纯用CSS3+HTML实现的场景效果图: 查看效果:http://hovertree.com/h/bjaf/cssrotate.htm css3 3d展示中rotate()介绍与 ...
- 分布式系统设计权衡之CAP
写在最前: 1.为什么学习并记录分布式设计理念一系列相关的东西 在日常工作中系统设计评审的时候,经常会有一些同事抛出一些概念,高可用性,一致性等等字眼,他们用这些最基本的概念去反驳系统最初的设计,但是 ...
- 背水一战 Windows 10 (13) - 绘图: Stroke, Brush
[源码下载] 背水一战 Windows 10 (13) - 绘图: Stroke, Brush 作者:webabcd 介绍背水一战 Windows 10 之 绘图 Stroke - 笔划 Brush ...
- jsp页面显示问题
一.在jsp页面的表格中,如果有表格中的某一个元素 内容太长,需要截取显示,方法如下: <%@ taglib prefix="fn" uri="http://jav ...