纯css打造凹进与突出效果

1.凹进效果

background:#f2f2f2 center repeat;

border-bottom: 1px solid #e9e9e9;
border-top: 1px solid #f9f9f9;

2.突出效果

background:#f2f2f2 center repeat;

border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #f9f9f9;

时间： 2024-11-08 14:53:53

纯css打造凹进与突出效果的相关文章

HTML5 CSS3专题纯CSS打造相册效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点. 先看html文件: <body> <div id="gallery"> <h1>纯CSS3相册效果&l

纯CSS打造忙碌光标

我们经常会用到忙碌等待的情况,比如ajax等待回调,或者加载页面的时候,我们通常的做法就是放一张loading.gif图片,在那里转呀转. 以前是在pc上用,也没有觉得不妥,如今要在移动端用,问题就来了,以前呢,做前端,兼容各种浏览器,就够让人头疼了,现在还要兼容各种屏幕尺寸. 开始呢,是做了N张不同大小的gif图.用javascript去判断屏的大小,然后选择适当的gif图片,这样做的缺点是很显的,说多了都是泪.现在我要做的,就是换成css3去实现这个效果.下面看效果图: 有兴趣的,可以复制

一款jQuery插件+CSS打造的左侧菜单效果

<!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"> <head> <meta http-equiv="Content-

纯CSS打造的安卓系统开机画面动画特效代

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>纯CSS打造的安卓系统开机画面动画特效代码</title> <style> .android{ position:relative; width:200px; heigh

史上最详细纯CSS打造3D文本滚动

昨天看见了一篇文章关于用纯CSS实现文本滚动,在这里跟大家分享一下. 首先把效果图贴给大家根据效果图我们很容易发现肯定是要用到3D转换的,如果对这个还不是很了解的可以先看看下面的文章 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-1/ http://www.w3cplus.com/blog/tags/95.html 那么首先我们就

纯CSS 实现tooltip 内容提示信息效果

Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单. html结构 <a class="css-tooltip" href="http://fatesinger.com/73887" data-tooltip="137 likes with 3.43k reads">WordPress

纯CSS打造可折叠树状菜单

1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="subsubfolder1" type="checkbox" /> <ol> <li class="file"><a>下级</a></li> <li> <label for=&q

哥也有个MacBook Air——纯CSS打造银色MacBook Air（一）

上一篇:<CSS3小分队——text分身text-shadow> 写在前面: 前段时间自己用CSS绘制了一个银色的MacBook Air,今天把它从电脑硬盘深处挖了出来,我把我的思路和想法写下来和小伙伴们分享分享.先把最后的效果给大家. 这其实是一个半成品,键盘上的其他图标和文字都还没有加,图标的话可以用font-face,有机会的话把它补全给大家. 小伙伴们也可以去codepen上查看高清无码大图,给出链接: http://codepen.io/myvin/pen/yNezZR 这里使用了C

纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

HTML代码如下 <div id="nav"><dl class="sy"><dt><a class="first" href="#" >首页</a></dt><dd class="line">|</dd><dd class="triangle"