CSS阴影的几种形式

2024-04-21 16:39:11

写静态，少不了对阴影的了解。图片阴影啦，文字阴影啦，盒子阴影啦，
其中用的相对较多的是，用的多了也就记住了。

text-shadow

是给文本添加阴影效果，

text-shadow:20px 20px 20px burlywood;

text-shadow第一个值
在text-shadow属性里第一个值代表的是水平方向的距离，这个值是必须有的而且支持负值
text-shadow第二个值
在text-shadow属性里第二个值代表的是垂直方向的距离，这个值是必须有的而且支持负值
当我们改变第二个值得大小时为正值时阴影会向下发生移动
在text-shadow属性里
第三个值代表的是设置阴影清晰和模糊程度的值，
这个值不支持负值当我们改变第三个值得大小发生改变时阴影会随着值得大小显示模糊程度当我们改变第一个值得大小时为正值时阴影会向右发生移动
text-shadow第四个值
在text-shadow属性里第四个值代表的是设置阴影颜色的值，这个值支持英文单词和#的写法当我们改变第四个值的属性值时阴影的颜色会随着我们设置的颜色来显示

box-shadow

box-shadow: 10px 10px 10px 10px greenyellow;

它和text-shadow前几个值都是一样的但是box-shadow有五个值，
第四个
box-shadow是有5个值的，第四个值代表的是盒子阴影区域的大小，第五个值代表的才是阴影颜色当我们改变第四个值的时候盒子阴影区域会随着我们的改变，而变换大小
是给元素块添加周边阴影效果。随着HTML5和CSS3的普及，这一特殊效果使用越来越普遍。

CSS阴影的几种形式相关推荐

你可能不知道的 CSS 阴影技巧与细节
关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧[1],介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS- ...
css阴影属性_第三场阴影场与属性访问器接口
css阴影属性这是" 影子字段与属性访问器"界面的第3轮 . 如果您是新手,但不确定要怎么做,请查看我以前的文章或关于开发JavaFX应用程序时节省内存的第一篇文章 . 作为J ...
css实现图片虚化_什么? CSS 阴影竟然还有这种骚操作？
点击上方"IT平头哥联盟",选择"置顶或者星标" 与你一起成长- 原作者:cocoqiao 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 f ...
CSS 阴影技巧与细节
单侧投影先说单侧投影,关于 box-shadow,大部分时候,我们使用它都是用来生成一个两侧的投影,或者一个四侧的投影.如下: OK,那如果要生成一个单侧的投影呢? 我们来看看 box-shadow ...
第四章 JavaWeb CSS入门核心基础基础形式 + 选择器
谢罪:今天起晚了= =! 文章目录什么CSS? css样式规则 CSS核心基础行内式也称为内联样式内嵌式链入式导入式选择器标记选择器类选择器 id选择器通配符选择器什么CSS? C ...
10个你未必知道的CSS技巧与14种cssdiv中基本滤镜介绍
2019独角兽企业重金招聘Python工程师标准>>> 1.CSS字体属性简写规则一般用CSS设定字体属性是这样做的: font-weight:bold; font-style:i ...
JS设置CSS样式的几种方式（js设置!important）
JS设置CSS样式的几种方式(js设置!important) x619y 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效 ...
html中页面布局技术,CSS基础之几种常见的页面布局
CSS基础之几种常见的页面布局本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的,按照它给出的方法不能实现我想要的目的.于是自己决定写一篇经验.如 ...
css 阴影效果_CSS阴影效果
css 阴影效果 CSS中的阴影效果 (Shadow Effects in CSS) It is always good to make our web pages stylish and beau ...

最新文章

热门文章