CSS3 box-shadow

原创 2015年11月18日 18:41:37

工作需要需要一个box-shadow效果,需要内阴影,且div的四周都要有阴影,对于CSS的box-shadow效果,有人说外阴影可以理解为从盒子的上方照下去投出的阴影,而内阴影则是从侧面照过去投出的阴影,这样想的话,就不难理解为什么设置内阴影的时候出现的效果一般都是left和bottom,或者top和right,在网上找的效果无外是这几种:
这里写图片描述

这里写图片描述

如何做一个四周都有内阴影的效果呢?

可以借鉴这种做法:

.box_container{
    box-shadow: 2px -2px  3px 3px black inset;
    -webkit-box-shadow: 2px -2px 3px 3px black inset;
    -moz-box-shadow: 2px  -2px 3px 3px black inset;
}

box-shadow具体使用方法,语法:

E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}换句说:对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

CSS3新特性box-shadow实现多重边框

css3中定义了许多的新特性,极大的丰富了css的表现力。本片博文意在探讨其中的新特性box-shadow。box-shadow语法如下box-shadow: h-shadow v-shadow bl...

CSS3阴影 box-shadow的使用详解

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

css3盒子阴影box-shadow 设置

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

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

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

CSS3 box-shadow实现纸张的曲线投影效果

本文地址:http://www.zhangxinxu.com/wordpress/?p=1322 一、简单的前言 一般的投影效果,尤其通过CSS实现的投影效果(无论是CSS3,还是IE滤镜),...

CSS3 盒阴影(box-shadow)详解

CSS3 的 box-shadow 有点类似于 text-shadow,只不过不同的是 text-shadow 是对象的文本设置阴影,而 box-shadow 是给对象实现图层阴影效果。本文我们搁下I...

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

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

CSS3 详解box-shadow

box-shadow一共可以有6个属性值。

CSS3之box-shadow

1、属性简介      box-shadow:颜色值|inset|none|!important       2、浏览器兼容性 (1)IE不兼容,IE9和IE10未知; (2)火狐3.5(包含3.5)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 box-shadow
举报原因:
原因补充:

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