CSS之shasow(阴影)
参考https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
box-shadow属性向框添加一个或多个阴影。语法先上:
box-shadow: h-shadow v-shadow blur spread color inset;
解释一下:
阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色;
其中X和Y是必须选的,其他可选。
在设置box-shadow时可以各式各样,非常漂亮,我们举些栗子:
冷的锋刃
CSS之shasow(阴影)的更多相关文章
- css之单边阴影
css之单边阴影 需求:在网上找的其他博客上说单边阴影需要牺牲掉模糊,实际上牺牲掉模糊直接用border不就好了 效果: 原理: 1.在左边的外阴影就是右边的内阴影 2.将box-shadow写在be ...
- css实现动态阴影、蚀刻文本、渐变文本
css实现动态阴影 创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: <div class="dynamic-shadow-parent"> ...
- CSS之弧形阴影
简述 网页上经常会出现一些弧形的阴影效果,看起来很漂亮,下面我们来讲述下如何用CSS来实现一个弧形阴影. 简述 阴影 效果 注释 标题 效果 源码 合并 效果 源码 阴影 效果 首先实现一个简单的阴影 ...
- 酷炫,用Html5/CSS实现文字阴影
前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...
- css border 三角形阴影(不规则图形阴影) & 多重边框的制作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...
- CSS实现文字阴影的效果
CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).1.DropShadow语法:{FILTER:DropShadow(Color=color,OffX=offX ...
- css设置边框阴影;box-shadow的使用
html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- css生成彩色阴影
通常用css生成单色或者同色系的的阴影(box-shadow),其实可以通过巧妙的利用 filter: blur 模糊滤镜,可以生成渐变色或者说是颜色丰富的阴影效果,如图: 原理: 利用伪元素,生成一 ...
- CSS 页面顶部阴影和给浏览器强制加上滚动条
/*给浏览器强制加上滚动条*/ html{height: 101%;} /*页面顶部阴影*/ body:before{ content: ""; position: fixed; ...
随机推荐
- linux 下使rdate命令支持ipv6 ntp server 同步时间
如果使用linux 下,busybox自带的rdate命令 去ipv6 的ntp server 同步时间的话,会提示invalid argument :无效参数. 那么现在下载rdate的源码并对其进 ...
- pjsip视频通信开发(上层应用)之EditText重写
我们经常使用手机的打电话功能,当我们按键盘的时候,有一个地方显示我们按键的内容,当我们的手点击那个地方的时候,并没有弹出软件盘,所以我们再有数字键盘的时候,要屏蔽系统的软件盘. 我们分析一下,软件盘弹 ...
- rails 调试
1. ruby-debug, ruby-debug19 没人维护,bug多.Ruby 1.9.3后不推荐使用 2. debugger ruby 1.9.3后的选择,功能强大,缺点是没有语法高亮. 项目 ...
- Eclipse中SVN的安装步骤(两种)和用法
一.给安装EclipseSVN,最常见的有两种方式:手动方式和使用安装向导方式.详细过程例如以下: 方式一:手动安装 1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tig ...
- 抛砖引玉:关于Android的ListView中CheckBox错乱
首先:参考了这篇翻译的文章:http://www.cnblogs.com/xiaowenji/archive/2010/12/08/1900579.html 文章中关于说的Android中的Recyc ...
- 安装luinxWEB
Webmin的安装很简单,下面就详细说一下安装步骤. 1.用ssh客户端软件登陆服务器2.切换目录到root下,命令是:cd /root/3.下载Webmin的安装文件,命令是:wget http:/ ...
- ibatis 分页的简单实现
ibatis 物理分页的简单实现 cheungmine 2013-8-26 使用SSI (Struts2, Spring3, iBATIS2.3)框架开发Web服务的时候有一个需求就是对查询得到的结果 ...
- VS2010中文/vs2008英文版/vs2005下载地址
ed2k://|file|cn_visual_studio_2010_ultimate_x86_dvd_532347.iso|2685982720|4AE6228933DDE49D9BFA4C3467 ...
- 了解PHP中Stream(流)的概念与用法(转)
Stream是PHP开发里最容易被忽视的函数系列(SPL系列,Stream系列,pack函数,封装协议)之一,但其是个很有用也很重要的函数.Stream可以翻译为“流”,在Java里,流是一个很重要的 ...
- 好记心不如烂笔头之JQuery学习,第三章
第三章中主要讲了几个对DOM进行操作的方法. 归纳如下: 属性的获取和设置: //属性的获取 $("li").attr("title"); //属性的设置 $( ...