text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor ...
分类：
Web程序 时间：
2017-01-26 00:07:58
阅读次数：
364
首先要说明原理: 1.input:text框让他层级最高,这边要设置透明度,这样保证遮盖的盒子操作的box-shadow能看的到,让文字的color设为背景色一致,这里设置为白色,在这样就看不到默认的字了 2.然后是给一个盒子来存放输入的框,就是6个虚拟的密码框,来显示你输入的个数 3.每个密码框里 ...
分类：
Web程序 时间：
2017-01-19 19:19:38
阅读次数：
327
本来是开发中一个简单的需求，就是类似用户导航一样，除了重点部分，其他地方都被黑色透明层遮住，为了项目保密，我还是用一个别人做的列子来表达下我的意思： http://www.zhangxinxu.com/study/201603/overlay-cover-refer-to.html 我最初发现用bo ...
分类：
移动开发 时间：
2017-01-18 11:08:20
阅读次数：
174
这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)： 首先是box-shados语法,用于向框添加一个或多 ...
分类：
Web程序 时间：
2017-01-13 23:33:57
阅读次数：
313
box-shadow介绍 css3可以使用 box-shadow 属性轻松地为元素添加阴影效果,box-shadow可以设定多组效果，每组参数值以逗号分隔. 语法： 参数说明： x-shadow：设置对象的阴影水平偏移值，单位可以是px、em或百分比等，允许负值。 y-shadow：设置对象的阴影垂 ...
假设我们的单标签是一个 div: 定义如下通用CSS： 法一：border 这个应该是最最最容易想到的了 法二：使用伪元素 一个标签，算上 before 与 after 伪元素，其实算是有三个标签，这也是很多单标签作图的基础，本题中，使用伪元素可以轻易完成。 法三：外 box-shadow 盒阴影 ...
分类：
Web程序 时间：
2016-12-25 13:54:26
阅读次数：
221
今天分享一个用纯CSS实现的3D按钮。css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。让人感觉有一种按钮被按下的感觉。css代码非常少，如下所示 a.css-3d-btn{ position: relative; color: rg ...
分类：
Web程序 时间：
2016-12-20 07:30:13
阅读次数：
227
难点 普通元素添加border-radius所生成的形状添加box-shadow的效果都非常完美。但是当普通元素添加了伪元素或者半透明的装饰之后，box-shadow就会有点力不从心。因为boder-radius会无耻地忽视透明部分。 场景: 1. 半透明图像，背景图像，border-image 2 ...
分类：
Web程序 时间：
2016-12-20 07:23:22
阅读次数：
315
一、单侧阴影 box-shadow属性的应用，格式：h-shadow v-shadow blur spread color inset属性取值介绍 h-sahdow：水平阴影的位置，允许负值 v-shadow：垂直阴影的位置，允许负值 blur：模糊距离 spread：阴影的尺寸，扩张距离，可以为负 ...
分类：
Web程序 时间：
2016-12-19 10:49:25
阅读次数：
205
一、盒子阴影：box-shadow属性 box-shadow:x偏移 y偏移 模糊距离 阴影大小 颜色 内阴影或外阴影; 二、弹性盒模型:flex属性 给父级diaplay:flex;子元素给flex:属性;flex有3个值; 取值： none：none关键字的计算值为: 0 0 auto<' fl ...
分类：
其他好文 时间：
2016-12-18 15:10:16
阅读次数：
168
