text-shadow: 0 1px 1px rgba(0,0,0,0.8);这段css是什么意思?

发布网友 发布时间：2022-04-06 11:19

我来回答

共6个回答

懂视网 时间：2022-04-06 15:41

其实在css3中有一个很实用的属性可以给字体文字添加阴影效果，那就是css3 text-shadow属性。

那么，我们先来详细的看一看text-shadow属性：

text-shadow是CSS样式属性单词，是设置对象中文本的文字字体是否有阴影及模糊效果的CSS样式。

text-shadow属性：在CSS3中可以用text-shadow属性给页面上的文字添加阴影效果, 可以通过对text-shadow属性设置相关的属性值，来实现一些需要的字体阴影效果,减少了图片的使用。

text-shadow属性的语法：

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

可以看出text-shadow属性可以设置4个参数，每个参数用空格隔开，下面我们来介绍一下这四个参数：

h-shadow： 设置水平阴影的位置（x轴方向），必需要设置的参数；允许负值。
v-shadow ： 设置垂直阴影的位置（y轴方向），必需要设置的参数，允许负值。
blur： 阴影模糊的距离（半径大小），可选择设置的参数。
color ： 阴影的颜色，可选择设置的参数。

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

下面我们来看一个css3设置字体文字阴影的小例子，来具体的感知一下text-shadow属性的用法：

<h1>我是一段测试文字</h1>

h1{
 color:powderblue; /*设置文字颜色*/
 text-shadow: 2px 3px 1px pink;/*添加字体文字的阴影*/
}

效果图：

我们再来看看如果不设置css3文字阴影效果会是怎样的：

说明：

1、阴影的水平偏移量（h-shadow）：可以取正值也可以取负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边。

2、阴影的垂直偏移量（v-shadow ）：可以取正值也可以取负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部。

3、阴影的模糊半径：只能设置为正值。如果值越大，阴影越模糊，反之阴影越清晰。如果其值为0时，表示阴影不具有模糊效果。

4、阴影的颜色：当没有指定颜色值的时候，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

说到浏览器的默认色不一样，我们来看看text-shadow属性在各个浏览器中是否支持：

浏览器的支持：

所有主流浏览器都支持 text-shadow 属性。

注：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。

热心网友 时间：2022-04-06 12:49

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。

热心网友 时间：2022-04-06 14:07

实际上是rgba (R, G, B, alpha滤镜透明度)

热心网友 时间：2022-04-06 15:41

追答顺序不可以颠倒 值可以随便改 只能用在文字上。如果想用在容器上
要用box-shadow:0 1px 1px rgba(0,0,0,0.8)

热心网友 时间：2022-04-06 17:33

热心网友 时间：2022-04-06 19:41

追答汗，我的回答比上面的准确点好吧。。。