css 左边阴影_css 实现单边内阴影

昨天做一个新网站的，其中有一个效果是单边(上边)内阴影，原以为正常的内阴影效果就可以任意指定哪一边，后来发现不是，这是一个没有解决的问题。

因此最后想到了一个 Trick，自己在这里先 Mark 一下。

网页的效果是这样子，注意中间大大的蓝色 banner 那里，单单是上方做了一个 40px 的内阴影。

具体思路如下：

1. 蓝色框固定高度，宽度充满，使用 overflow: hidden；

2. 里面放一个 absolute 定位的充满的 div，加上 40px 内阴影;

3. 里面这个阴影框左、右、下边各使用 -40px 的绝对定位;

然后就大功告成了，非常简单。

下面简单写一下代码：

1. Markup:

CSS

.banner {

border-top: 2px solid #AAA;

background-color: #4DC2F5;

position: relative;

overflow: hidden;

height: 300px;

}

.banner .shadow {

position: absolute;

top: 0;

bottom: -40px;

left: -40px;

right: -40px;

-moz-box-shadow: inset 0 0 40px #555;

-webkit-box-shadow: inset 0 0 40px #555;

box-shadow: inset 0 0 40px #555;

}

其实方法绝对还有很多，但是其实网页布局方面还是可以相当灵活的。

【转载请附】愿以此功德，回向 >&gt

css 左边阴影_css 实现单边内阴影相关推荐

css 左边阴影_css揭秘-用户体验
选用合适的鼠标光标难题鼠标指针的用途不仅在于显示鼠标在屏幕上的位置,还可以告诉用户当前可以执行什么动作.这在桌面应用程序中是十分普遍的用户体验实践,但在网页应用中却往往被忽视. 解决方案 css3 ...
css边框阴影_CSS框阴影
css边框阴影 As text-shadow is to text, box-shadow is to most everything else. It even uses the same basi ...
CSS设置阴影样式大全包含所有样式有图有代码
常用的样式: 下面还有特殊的效果 <html> <head><title></title><style type="text/css&q ...
html给文字添加阴影效果,text-shadow css文字阴影_字体投影属性样式
text-shadow为css文字阴影.css字体投影与字体阴影含胡效用效果的CSS属性单词 css text-shadow阴影功效一.text-shadow先容 text-shadow是CSS格局 ...
html对颜色加深,css字体阴影如何加深？
CSS3设置字体阴影效果使用 text-shadow 属性,下面我们来介绍下加深字体阴影的方法,希望对各位有帮助! css字体阴影如何加深? css设置字体阴影使用text-shadow属性. 语法: ...
CSS 边框阴影效果
CSS 边框阴影效果下面将css实现阴影效果,以便需要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...
html form阴影,HTML CSS边框阴影的实现
一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器. CSS边框阴影 ...
纯css实现阴影跳动
前言:能否使用 web 开发技术创建一个五颜六色的,并且足够聪明可以模拟前景颜色的阴影呢?事实证明,在只使用 CSS 的情况下,完全可以实现这种效果.在本文中,我们将研究如何实现. 图片实现用于展示 ...
html左边移动属性,css左边偏移属性left、右边偏移属性right
[实例介绍] css左边偏移属性left.右边偏移属性right 通过left属性来设置左边偏移属性,通过right属性来设置右边偏移属性. [基本语法] position:static | ab ...

css 左边阴影_css 实现单边内阴影

css 左边阴影_css 实现单边内阴影相关推荐

最新文章

热门文章