关于CSS3阴影使用方法介绍

一、边框阴影

标准语法:

box-shadow : h-offset  v-offset  blur  spread  color [   inset ] ,… 

[ 偏移量向右下为正值,左上为负值 ]

a、若有多重阴影,用逗号分隔,且依次往下叠加,最先写的在最上面

b、若有inset,则为内侧阴影,但要注意:如果只是简单的在原来阴影上加 inset,则阴影在相反一侧内部,并非简单翻转反向。

c、扩展spread最大的好处和作用是当取负值时屏蔽或减少对其余3边的干扰

d、如果元素内部DIV填充有颜色,则内侧阴影会被有颜色的部分遮蔽,但可将内部有颜色的DIV设置为relative并将z-index设为-1即可显示被遮挡的内侧阴影。

[这种情况较少,而且有诸多限制 ]

二、文本阴影

标准语法:

text-shadow : h-offset   v-offset   blur   color ,…

[ 偏移量向右下为正值,左上为负值 ]

a、若有多重阴影,用逗号分隔,且依次往下叠加,最先写的在最上面

效果二:Apple Style Effect

.demo4 {  color: #000;
  text-shadow: 0 1px 1px #fff;           }

效果三:Photoshop Emboss Effect

.demo5 {  color: #ccc;
  text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}

效果四:Blurytext Effect

.demo6 {  color: transparent;
  text-shadow: 0 0 5px #f96;}

效果七:3D text effect

.demo10 {  color: #fff;
  text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223,

以上就是关于CSS3阴影使用方法介绍的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1608151.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 21:33:39
下一篇 2025年12月23日 21:34:00

相关推荐

  • 详解CSS3页面布局浏览器兼容与前端性能优化方法

    css如何垂直居中一个元素的问题已经是一个老生常谈的问题了。不管对于一个新手或者老手,在面试过程中是经常被问到的。前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒几种常见的方式。不足之处请大家批评指正(所有的代码都是自己亲手敲过可用的) 1、水平居中(margi…

    2025年12月23日 好文分享
    000
  • CSS3新特性绘制常见图形方法介绍

    前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等。以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形。 在此之前我们有必要了解下什么是伪元素(和它不同的,还有一个概念叫伪类,两者容易混淆),没有它画不成图形的。 a)伪元…

    好文分享 2025年12月23日
    000
  • 使用CSS3变形、过渡、动画、关联属性解析

    一、变形 transform:可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。示例: transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45…

    好文分享 2025年12月23日
    000
  • 使用CSS3 3D行星运转以及浏览器渲染原理详细介绍

    最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家。 CSS3 3D 行星运转 demo 页面请戳:Demo。(建议使用Chrome打开) 本文完整的代码,以及更多的 CSS3 效果,在我 Github 上可以看到,也希望大家可以点个 star。 嗯,可能有些人打不开 demo 或者页面…

    2025年12月23日 好文分享
    000
  • 使用CSS3炫酷的发光文字自定义文字色彩的方法

    background:#eeefff;这是一款基于纯CSS3的文字发光特效,当我们将鼠标滑过文字时,文字就会模拟发光动画,展现出非常酷的发光画面。另外,由于引用了特殊字体,所以整个文字效果看起来有着3D立体的特效,如果你的网络无法加载这些字体,可能是由于国外的这个网站被墙的缘故,就像google的字…

    2025年12月23日
    000
  • 使用CSS3实现绚丽的飘带样式菜单方法介绍

    background:#eeefff;这是一款很漂亮很有特色的CSS3菜单插件,和普通的菜单不同,它拥有飘带的外观,同时,鼠标滑过菜单项时,菜单项又会突起显示,很有3D立体的视觉效果。结合网页的背景,这款菜单就更显立体感了。有需要的前端设计师可以通过研究源码来使用这款菜单插件,当然,这也需要你的浏览…

    2025年12月23日
    000
  • 使用纯CSS3人物行走动画实例代码

    今天分享给大家的是一个用纯css3实现的人物行走动画,在没有使用javascript的情况下,用css3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的,将人物行走时的状态分割成多张图片,然后利用css3的动画属性将这些图片串联起来形成人物行走动画效果。 在线演示源码下载 HTM…

    2025年12月23日
    000
  • 使用CSS3实现百叶窗焦点图动画实例代码

    background:#eeefff;这是一款基于CSS3的百叶窗焦点图动画,一共有4种不同的百叶窗动画风格,每一个都看似非常简单,但是却又相当实用。更值得注意的是插件提供了4种不同的百叶窗特效,有水平百叶窗、垂直百叶窗和淡入淡出百叶窗等。并且,该CSS3百叶窗图片切换插件切换时非常平滑,效果很不错…

    2025年12月23日
    000
  • 使用纯CSS3实现时间轴切换焦点图实例代码

    background:#eeefff;这是一款基于jQuery和CSS3的焦点图动画插件,插件非常迷你,功能也比较简单,它的特点是图片切换按钮类似一条时间轴,点击时间轴的圆圈即可切换到相应的图片。点击切换按钮时,按钮会出现渐隐渐显的发光特效,图片切换过程中整张图片过渡的效果非常柔和,并且图片描述也相…

    2025年12月23日 好文分享
    000
  • CSS3四中属性解析(变形、过渡、动画、关联)

    一、变形 transform:可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。示例: transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45…

    好文分享 2025年12月23日
    000
  • CSS3中content的属性详解

    css中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入。 插入纯文字 content : ”插入的文章”,或者 content:none 不插入内容 #html…

    好文分享 2025年12月23日
    000
  • 教你玩转CSS3的3D效果

    css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2d事物,从而展现3d的效果。旋转则不再是2d平面上的旋转,而是三维坐标系的旋转,就包括x轴,y轴,z轴旋转。平移同理。…

    2025年12月23日 好文分享
    000
  • 使用CSS3媒体查询方法总结

    首先我们在使用media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 这段代码的几个参数解释: width = device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0)   minimum-scale:…

    好文分享 2025年12月23日
    000
  • 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 实例代码 纯CSS3写的10个不同的酷炫图片遮罩层效果 @@##@@ PHP中SESSION和COOKIE基本用法 在项目中我们会经常用到Session和Cookie,比如用户登录验证、记录用户浏览历史,存储购物车数据,限制用户会…

    2025年12月23日 好文分享
    000
  • CSS3中的变形与动画详细说明

      最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画。其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速,性能更好。    (下面均没写浏览器前缀,如有需要请自行添加~~) CSS3常见的动画效果的实现…

    好文分享 2025年12月23日
    000
  • 使用CSS实现Footer置底的五种方式

    页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。 方法一:将内容部分的margin-bottom设为负数 footer htm…

    2025年12月23日
    000
  • 使用CSS3时限随内容自动伸缩的背景

    css3给我们带来一个非常实用的新属性:border-image,利用这个属性我们可以做出随着内容的增减自动伸缩的背景。废话不多说,看代码!html:     第一条列表内容     第二条列表内容     第三条列表内容     第四条列表内容     第五条列表内容 css:border: 20…

    2025年12月23日 好文分享
    000
  • 详解CSS3背景相关样式实例代码

    这篇文章详解css3背景相关样式实例代码 background-image绘制多张图片叠加,示例如下: background-image绘制多张图片叠加 div{ width:1100px; height:800px; background-image: url(“../../image/icon1…

    好文分享 2025年12月23日
    000
  • 利用纯css3实现圆形从中心向四周扩散动画效果代码

    先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to {top:130px;}} 效果:http://hovertree.com/texiao/css3/37/1.htm 可以通过 @keyframes 规则,创建动画。 创建动画的原理是,…

    好文分享 2025年12月23日
    000
  • 分享一个FlexBox标准及兼容写法速查表

    以上就是分享一个FlexBox标准及兼容写法速查表的详细内容,更多请关注创想鸟其它相关文章!

    好文分享 2025年12月23日
    000

发表回复

登录后才能评论
关注微信