CSS外框阴影效果

2016-02-19 19:45 5 1 收藏

岁数大了，QQ也不闪了，微信也不响了，电话也不来了，但是图老师依旧坚持为大家推荐最精彩的内容，下面为大家精心准备的CSS外框阴影效果，希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发】

style
.s1{ border:2px solid #f7f7f7;width:200px;}
.s2{ width:200px; height:300px; border:1px solid #ddd;}
/style
div class="s1"
div class="s2"
CSS外框阴影
/div
/div

来源:http://www.tulaoshi.com/n/20160219/1621696.html

上一篇： DW制作网页时使用CSS的注意事项
下一篇： CSS实现不定高度DIV绝对居中

看过《CSS外框阴影效果》的人还看了以下文章更多>>

使用CSS给图片添加阴影的方法

标签： Web开发

一般我们可以使用背景图的方式给图片添加阴影，但对于不固定尺寸的图片如何实现呢？我们可以采取视觉欺骗大法定义渐变边框来实现： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml"...

CSS3 应用01 - 文本阴影效果（兼容等多浏览器）

标签： Web开发

CSS3 提供一个文本阴影属性： text-shadow : color || length || lenth || opacity 其中，第一个参数是颜色，第二个参数是阴影的水平延伸距离，第三个参数是阴影的垂直延伸距离，第四个参数是模糊效果的作用距离。支持设定多组效果。例如：text-shadow: #333333 4px 5px 6px; 可是，IE 6-9 都不支持文本阴影的属性，只能使用 filte...

CSS实现绝对的完美圆角框

标签： Web开发

导言：本文探讨的是圆角框的终极解决方案，其核心关键词是圆滑、完美、兼容、重用性、语义，这些技术都是收集目前网络上最流行的做法。纵观种种方法，各有其优势，请针对不同的环境分别使用。圆角框，因为其样式比直角框漂亮，所以成为设计师心中偏爱的设计元素。现在的web标准下大量的网页、博客都采用圆角框设计，成为一道亮丽的风...

用CSS设计你的搜索框

标签： Web开发

今天我将介绍一下如何使用CSS中的背景图片来设计你的搜索框。之前我使用别的方法来实现我的表单和搜索框，但是这种方法看起来会更容易些，所以我想将它与感兴趣的朋友分享。 View Demo 原始方式首先来让我们看看我的原始的使用input type=”image” src=”image_url” /的方法： form method="get" id="searchform" actio...

Photoshop创建内容盒阴影效果

标签： PS PS基础

最终效果图：具体的创建步骤如下：一、新建一个文档，640像素宽、480像素高，白色背景。接下来新建一个图层，填充为#e2e2e2，重命名为bg，在图层面板中右键单击bg图层，选择转换为智能物件(Convert to Smart Object)。然后给该图层应用滤镜(Filter)》杂色(Noise)》添加杂色(Add Noise)命令。各项参数设置如下图所示：二、新建一个...

查看更多精彩>>