简单易变的CSS阴影效果

2024-05-16 12:03:54

厌倦了在图片处理软件上给每张图片加上边框修饰？让CSS帮你一把吧！嘿嘿，看看下面的几张效果图，边框都不是用图片做的，很方便吧？

文字块的应用效果

NARROW

This is the text that goes in the middle.

MEDIUM

Another box that has a bit more text so that the box will be taller and the shadow stretches to suit.

WIDE

One more text box that has a lot more text so that the box will be even taller and the shadow will still shadow to suit. The shadow color can be matched to the background and can also be positioned to the left or right.

内阴影

MEDIUM

and finally a text box with a surround shadow.

代码解析

HTML部分

lt;div class="out narrow">
<div class="in ltin tpin">
<h2>NARROW</h2>
<p>This is the text that goes in the middle.</p>
</div>
</div>
<!--以上只是第一个文字块的HTML代码，但原理和其他几个都类似,
里面的class值有空格,如后者与前者的样式有不一的就用后者的样式-->

css代码部分

    .out {
display:block;
background:#bbb;
border:1px solid #ddd;
position:relative;
margin:1em 0;
}/*设置外框(背景、边框与定位)*/
.in2 {
display:block;
background:#777;
border:1px solid #999;
position:relative;
padding:1px;
margin:1px;
}
.in {
text-align:center;
background:#fff;
border:1px solid #555;
position:relative;
padding:5px;
font-weight:normal;
}/*内框的设定*/

    .ltin {
left:-5px;
}
.tpin {
top:-5px;
}
.rtin {
left:5px;
}/*内框移位，外框的背景色就成了阴影*/

应用在图片上

转载于:https://www.cnblogs.com/goody9807/archive/2008/06/11/1217440.html

简单易变的CSS阴影效果相关推荐

简单绘图软件实现mfc大作业_生产流程图怎么做？简单易上手的流程图工具
生产流程图是什么呢?首先,生产流程指的是在生产的过程中,劳动者通过利用一定的生产设备或工具,将各种原材料.半成品投入,按照一定顺序进行加工,最终得到成品产出的整个过程.而生产流程图则是使用图表符号的形 ...
javascript 代码_如何使您JavaScript代码简单易读
javascript 代码 by Arthur Arakelyan 通过亚瑟·阿拉克利安(Arthur Arakelyan) 如何使您JavaScript代码简单易读 (How to keep you ...
基于ForkJoin构建一个简单易用的并发组件
2019独角兽企业重金招聘Python工程师标准>>> 基于ForkJoin构建一个简单易用的并发组件在实际的业务开发中,需要用到并发编程的知识,实际使用线程池来异步执行任务的场景 ...
简单易扩展的爬虫架构
已经写了好几篇的网络爬虫了,都是单个应用程序,那个下面介绍一下简单易扩展的爬虫架构: 应用场景是:爬取百度百科搜索关键字的1000个相关链接及相应的简介: 模块介绍: 首先是我们的主调度程序spide ...
弥散阴影html,超赞！一份简单易上手的青春弥散阴影修炼手册
@笔戈科技 :一份简单易上手的青春弥散阴影修炼手册!九张长图/3种方法/3种效果/4个技巧,包你学会设计时下流行的骚气通透的弥散阴影效果. 投影法较为简单粗暴,但是投影效果较为粗糙缺乏立体感,投影颜色 ...
h3cminia51使用手册_双频覆盖简单易用的AP H3C Mini A51
现在的酒店,商场,学校,医院等等这些公区的上网需求人数越来越多,为了更好地服务质量,就必须拥有稳定流畅的网络环境,也因此,笔者为企业用户朋友们介绍一下无线接入器,目前这款产品在京东上的售价为439元, ...
简单易用的OKR工具——源目标OKR
有效**推行OKR**需要一些必备的前提,比如:平等包容的企业环境.高层的理解和支持.简单易用的OKR目标管理工具. 最近几年,OKR真的火了! 前有谷歌布道,后有无数大佬站台,2014年,OKR传入 ...
分享简单易用的配网终端加密模块
概述目前现有的配网自动化试点(包括国网和南网)均未考虑二次安防,而在110KV以上的变电网里,二次安防是一个很重要的建设内容,主要原因在于以前配网自动化建设不规范,且技术条件不成熟. 二○一一 ...
简单易用的开源用户操作日志记录系统
我们开发的业务系统通常会提供给很多人使用,那在使用的过程中,日志系统变得非常重要. 日志系统记录的用户行为有以下的作用: 从系统用户角度看:它展示了用户自身的操作历史和具体对象的变动历史,便于用户进行 ...

最新文章

热门文章