css3阴影box-shadow使用个人笔记

原创 2017年08月02日 10:49:33

在过去的工作中经常会在设计图中遇到阴影效果的样式,但是每次使用box-shadow实现阴影效果的时候总是因为遗忘它一些值的用途而上网搜索。所以我打算把我多box-shadow的理解和我经常使用的场景记录下来。一是方便自己以后查阅,二是为了将其分享个大家,同时也希望大家能多多指正。

box-shadow兼容性



基本语法:

box-shadow: inset h-shadow v-shadow blur spread color;

inset:可选。将外部阴影 (outset) 改为内部阴影。
h-shadow:  必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊距离。
spreed:可选。阴影的尺寸。
color:可选。阴影的颜色。

为了更形象的理解这些值的特征,我一个Demo来加深理解:

Demo代码如下



    
    css阴影边框Demo
    


    

box-shadow每个参数的演示

box-shadow常见应用场景

input获取焦点时

鼠标移动到模块上的场景



Demo效果如下:



相关文章推荐

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inse...

css3中的box-shadow(阴影)使用说明和兼容性问题

CSS3 box-shadow 属性讲解: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:阴影水平偏移的距离,...

CSS3阴影 box-shadow的使用详解

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[in...

CSS3阴影 box-shadow的使用和技巧总结

本文转自:http://blog.csdn.net/freshlover/article/details/7610269 text-shadow是给文本添加阴影效果,box-shad...

css3阴影box-shadow

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[in...

css3 边框阴影 box-shadow

box-shadow是向盒子添加阴影。支持添加一个或者多个。 很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径]...

CSS3之元素阴影box-shadow

今天为大家分享CSS3中的box-shadow,这个属性适用于给元素设置阴影的。我们用这个box-shadow属性,可以省去以前遇到阴影就切图的笨方法了。本文将介绍有关box-shadow的一些语法,...

css3盒子阴影box-shadow 设置

定义:box-shadow 属性向框添加一个或多个阴影。 支持:IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。 语法...

css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)

1.圆角效果(border-radius)

HTML5与CSS3之box-shadow--阴影外阴影与外发光

外阴影:box-shadow:X Y Npx #color; 内阴影:box-shadow:inset X Y Npx #color; 第一个属性:阴影的X轴(可以使用负值) 第二个属性:阴影的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3阴影box-shadow使用个人笔记
举报原因:
原因补充:

(最多只允许输入30个字)