css实现阴影效果的方法

　　介绍

这篇文章主要介绍了css实现阴影效果的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

方法:1、使用文本阴影属性,语法”文本阴影:水平阴影垂直阴影模糊距离颜色;”;2、使用不必属性,语法”不必:水平阴影垂直阴影模糊距离阴影大小颜色插图;”。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

<强>方法1:使用文本阴影属性

<代码>文本阴影属性用于设置带阴影的文本;可设置阴影的像素长度,宽度和模糊的距离以及阴影的颜色。

语法:

文本阴影:,h-shadow  v-shadow  blur 颜色;

属性值:

<李>

h-shadow:设置水平阴影的位置,允许负值。

<李>

v-shadow:设置垂直阴影的位置,允许负值。

<李>

模糊:设置模糊的距离。

<李>

颜色:设置阴影的颜色。

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　,,,& lt; head> 　　,,,,,,,& lt; meta  charset=癠TF-8"比; 　　,,,,,,,& lt; title> css设置阴影效果& lt;/title>, 　　,,,,,,,& lt; style>, 　　,,,,,,,,,,,h2  {, 　　,,,,,,,,,,,,,,,颜色:,红色,, 　　,,,,,,,,,,,,,,,文本阴影:,3 px  5 px  5 px  # 656 b79;, 　　,,,,,,,,,,,} 　　,,,,,,,& lt;/style>, 　　,,,& lt;/head>, 　　,,,& lt; body>, 　　,,,,,,,& lt; h2>文本阴影! & lt;/h2> 　　,,,& lt;/body>, 　　& lt;/html>

<强>方法2:使用不必属性

<代码>不必属性可以将阴影应用于文本框,可设置中阴影的像素长度,宽度和模糊的距离以及阴影的颜色。

语法:

不必:,h-shadow  v-shadow  blur  spread  color 插图;

属性值:

<李>

h-shadow:设置水平阴影的位置,允许负值;必需值,不可省略。

<李>

v-shadow:设置垂直阴影的位置,允许负值;必需值,不可省略。

<李>

模糊:设置模糊距离,可选值,可省略。

<李>

传播:设置阴影的大小,可选值,可省略。

<李>

颜色:设置阴影的颜色,可选值,可省略。

<李>

插图:设置从外层的阴影(开始时)改变阴影内侧阴影;可选值,可省略。

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　,,,& lt; head> 　　,,,,,,,& lt; meta  charset=癠TF-8"比; 　　,,,,,,,& lt; title> css设置阴影效果& lt;/title> 　　,,,,,,,& lt; style> 　　,,,,,,,,,,,.demo { 　　,,,,,,,,,,,,,,,宽度:,400 px; 　　,,,,,,,,,,,,,,,身高:,300 px; 　　,,,,,,,,,,,,,,,保证金:,50 px 汽车; 　　,,,,,,,,,,,} 　　,,,,,,,,,,,.demo  img { 　　,,,,,,,,,,,,,,,,不必:,10 px  10 px  10 px  rgba (0, 0, 0, 0。5); 　　,,,,,,,,,,,,,,,,/*考虑浏览器兼容性*/,,,,,,,,,,,,,,,,-moz-box-shadow:, 10 px  10 px  10 px  rgba (0, 0, 0, 0。5); 　　,,,,,,,,,,,,,,,,-webkit-box-shadow:, 10 px  10 px  10 px  rgba (0, 0, 0, 0。5); 　　,,,,,,,,,,,} 　　,,,,,,,& lt;/style> 　　,,,& lt;/head> 　　,,,& lt; body> 　　,,,,,,,& lt; div 类=癲emo"比; 　　,,,,,,,,,,,& lt; https://www.yisu.com/zixun/img  src=" img/1. jpg "/>