(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box-shadow:0 4px 4px #999; -webkit-box-shadow:0 4px 4px #999; box-shadow:0 4px 4px #999; 使用#设置的颜色是没有透明效果的.这样设置阴影的颜色,如果阴影落在的位置不是白色的,甚至是动态的,例如落在了幻灯片上,好几张不同颜…

一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式]; 单词解释:blur:模糊 spread:伸展 inset:内凹 参数解释: offset-x:必需,取值正负都可.offset-x水平阴影的位置. offset-y:必需,取值正负都可.o…

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使用以及介绍: 1.要实现水平或者垂直切分,必须先满足以下要求   i. display : box必须用在对应的父窗口,比如div.parent>div.panel*3 这种格局, parent 必须先先定义此属性   ii. .panel的元素定义box-flex,来实现按比例切分.如下图:就是将…

rem 长度单位   在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局.不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用.真是进也难,退也难呀. 最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小.让我一下子就来劲了,一口气看完并测试了一回…

在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局.不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用.真是进也难,退也难呀. 最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小.让我一下子就来劲了,一口气看完并测试了一回,还真是爽歪歪的呀.师…

1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border.margin以及元素实际尺寸的计算关系,而它们的不同之处则是两者的计算方法不一致. 1).W3C的标准Box Model: /*外盒尺寸计算(元素空间尺寸)*/ Element空间高度 = content height + padding + border + margin Element空间宽度…

前言 因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不同, 这样的问题肯定在书本上很难找到解决办法, 需要通过平时的基础积累和经验. 解决方案 使用 ::first-line 伪元素 使用 text-shadow 和 text-fill-color 使用 caret-color ::fist-line 修改元素 原理 一般来说,设置input框的 color 属性会修改文本内容的颜色,同时顺带改变光标的颜色.而::first-line也可以设置首行文本内容的颜色, 利用选择器的权…

以左上角为原点 -moz-transform-origin: 0 0; -webkit-transform-origin:0 0; -o-transform-origin:0 0; 以右上角给原点 -moz-transform-origin: top right; -webkit-transform-origin:top right; -o-transform-origin:top right; 以左下角为原点 -moz-transform-origin: 0 100%; -webkit-tra…

1.text-shadow 有3个length参数,第1个表示水平偏移,第2个表示垂直偏移,第3个表示模糊(可选) .text11{text-shadow: 3px 3px 5px #f00 ;color: yellowgreen;}  2.-webkit-text-stroke 描边的文字: -webkit-text-stroke: 1px yellow 描边为1px 3.box-reflect 文字倒影: -webkit-box-reflect: below 10px; 文字和倒影之间相隔1…

.footer-container .footer-content p .motto { font-weight: bolder; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right,#ff6e71,#ffaa73,#3cdc82,#64dcf0,#b4b4ff); } .name { -webkit-background-c…