box-shadow: 0px -15px 10px -15px #111; 五个值分别为:x y blur spread color 将 spread 设置成 blur 的负值即可 这种只适用于 offset 和 blur 相差比较小的情况,相差太大的话效果不是很好 see: 1. StackOverflow 2. codepen

from: http://jingyan.baidu.com/article/03b2f78c4d9fae5ea237aea6.html css3 box-shadow 内阴影与外阴影 1- box-shadow具体使用方法,语法: E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}换句说:对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} 取值:

/* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0

一.box-shadow语法 box-shadow: none | inset(可选值,不设置,为外投影,设置,为内投影) x-offset(阴影水平偏移量,正方向为right) y-offset(阴影垂直偏移量,正方向为bottom) blur-radius(阴影模糊半径,为正,0为无模糊效果,值越大,越模糊) spread-radius(阴影扩展半径,可正可负) color 属性值描述: 1.阴影类型:此参数可选,默认的投影方式是外阴影:如果取其唯一值“inset”,就是将外阴影变成内阴影2

不谈IE,只谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length>?||<color>} 也就是: E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 换句说: 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜

1. css3 box-shadow CSS3的box-shadow属性可以让我们轻松实现图层阴影效果 box-shadow:  inset(可选 默认没有) x-offset    y-offset     blur-radius     spread-radius     color 投影方式 X轴偏移量     Y轴偏移量     阴影模糊半径     阴影扩展半径          阴影颜色 box-shadow和text-shadow一样可以使用一个或多个投影,如果使用多个投影时必须需

css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个.其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个.其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小, 即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工

_______________________________________________________________  css3 瀑布流 N 列 <ul><li>aaa</li><li>aaa</li></ul> ul{-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;} ul li { -moz-page-break-inside: avoid;

CSS3 的 box-shadow 有点类似于 text-shadow,只不过不同的是 text-shadow 是对象的文本设置阴影,而 box-shadow 是给对象实现图层阴影效果.本文我们搁下IE不谈,只谈谈 box-shadow 的具体使用方法 语法: 1 box-shadow:inset x-offset y-offset blur-radius spread-radius color 也就是: 1 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴

一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow     必需.水平阴影的位置.允许负值. v-shadow        必需.垂直阴影的位置.允许负值. blur                 可选.模糊距离. spread             可选.阴影的尺寸. color                可选.阴影的颜色. inset   

一.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

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 演示 来看看这2个滚动条demo:demo1(图片版).demo2(纯CSS3版) 滚动条组成 ::-webkit-scroll

CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴影垂直偏移值.可以为负值 <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值.不允许负值 <color>: 设置对象的阴

本系列主要总结Css3一些新特性的认识,来源于<css揭秘>书. 一.半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360):s:饱合度(0%~100%):l:亮度(0%~100%):a:透明度(0~1) background-clip:裁剪背景颜色,默认为border-box(背景颜色扩散到border):padding-box(背景颜色扩散到padding):content-box(背景颜色扩展到content) 示例代码: width:200px; he

1.圆角效果 border-radius: 1px 1px 1px 1px; /* 四个半径值分别是左上角.右上角.右下角和左下角.顺时针 */  右边半圆 div.right-circle{ height:100px; width:50px; background:#9da; border-radius:0px 50px 50px 0px; } 2.阴影 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; xy轴偏移量为负数值时,可

一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜.JS+DIV或VML处理!本篇为先占个坑,以后慢慢填^_^!!! CSS3 Filter兼容性表 SVG effect for HTML兼容

先声明下,下面的特效不是我发明的,对CSS3的创造力还不够,只是看了别人demo的源码,一点一点分析出来的.整理出的笔记,分享给大家.因为源码是好,但是一头扎进去半天出不来. 首先看个登陆框,如下,相信不少朋友见到过. 这个上面有很多css3特效.边框阴影,内置斜纹的字体,login 下的横线等,我来一一分解. 1.内外阴影画法: 大家熟知box-shadow,这个比较简单.box-shadow最多有个参数,分别是x投影,y投影,模糊半径,扩展半径,颜色,inset.inset决定了是内阴影还是

css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出         http://codepen.io/airen/pen/icFba         如果大家感兴趣,大家可以去慕课网上找大漠老师的课学习. 边框 1.圆角效果 border-radius:border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */ bord

一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴影垂直偏移值.可以为负值 <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值.不允许负值 <color>: 设置对象的阴影的颜色. 示例代码: <!DOCTYPE html> <html> <head> <meta char

如题,给大家介绍和讲解几个常用的CSS3属性,并用到实处. 先看demo(请使用Chrome或者Firefox浏览,IE的靠边): 点此查看实例 觉得爽的可以继续阅读下面的知识点,感觉不爽的可绕行. 使用基础的Html和CSS写出雏形 需要一提的是头像(img)的排版.给外面a标签padding-left:;,img自身float:left;margin-left:;,这种写法避免了不少因浮动产生的问题,且代码简明,推荐适当的使用此方法. 使用并解说所用CSS3 接下来给大家说说这个读者墙所应用

HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记; 比如input和br, /可以不写; 新增的标签 header,nav,footer,section,video,audio··· 功能性标签:video,audio,canvas··· 结构标签:header,nav,footer,section··· 页眉;不兼容IE8-; 页脚;不兼容IE