css3中的阴影怎么写

html-css025

css3中的阴影怎么写,第1张

box-shadow 属性--设置元素阴影

实例:  向 div 元素添加 box-shadow

<!DOCTYPE html>

<html>

<head>

    <style> 

        div{

            width:300px

            height:100px

            background-color:#ff9900

            -moz-box-shadow: 10px 10px 5px #888888 /* 老的 Firefox */

            box-shadow: 10px 10px 5px #888888

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

text-shadow 属性 ---设置文字阴影 <!DOCTYPE html>

<html>

<head>

    <style>

   

         h1{

            text-shadow: 5px 5px 5px #FF0000

        }

    </style>

</head>

<body>

    <h1>文本阴影效果!</h1>

</body>

</html>

border:1px solid rgba(0,0,0,0.1)意思是 设定元素的边框为1像素宽,实线,颜色使用rgba来表达。

其中,rgba是CSS3中的属性,

rgba括号中前3个数字代表着 red green blue三种颜色的rgb值,0-255,最后一个是设定这个颜色的透明度即alpha值。范围从0到1,越接近1,代表透明度越低。

是给文字添加阴影效果 4个值的含义分别是:

0:阴影水平偏移值(可取正负值);

1px:阴影垂直偏移值(可取正负值);

1px:阴影模糊值;

rgba(0,0,0,0.8):阴影颜色;

CSS3 text-shadow 属性

定义和用法

text-shadow 属性向文本设置阴影。

默认值:none 

继承性:yes 

版本:CSS3 

JavaScript 语法:

object.style.textShadow="2px 2px #ff0000"  

语法

text-shadow: h-shadow v-shadow blur color

注释:text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

鼠标放到文字上显示阴影代码为文字添加阴影。text-shadow为文字添加阴影,可以为文字添加多个阴影,添加多个时阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。参数描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊的距离。color可选。阴影的颜色。