css 阴影效果_CSS阴影效果

css 阴影效果

CSS中的阴影效果 (Shadow Effects in CSS)

It is always good to make our web pages stylish and beautiful, web pages that would catch users eyes instantly but one gets confused as to how to style his or her web page. The confusion is quite legit too as there is an abundance of styling techniques that one can apply on their web page. Therefore, this section is about one such styling method, that is shadows in CSS.

使我们的网页时尚美观，可以立即吸引用户的眼球，但对于如何设置其网页样式却感到困惑，这总是好事。混乱也很合法，因为人们可以在其网页上应用大量的样式设计技术。因此，本节将介绍一种这样的样式化方法，即CSS中的阴影 。

Using CSS shadow property you can create shadows for text and boxes. Now that we are aware of what this property is, let us discuss some of its properties as well.

使用CSS shadow属性 ，可以为文本和框创建阴影。现在我们知道此属性是什么，让我们也讨论其某些属性。

文本阴影属性 (The text-shadow Property)

The very first and quite easy property is text-shadow property. As the name suggests, using text-shadow property you can apply shadows to the text. Making your text smoky and stylish. The values of this property are mentioned below

第一个也是非常容易的属性是text-shadow属性 。顾名思义，可以使用text-shadow属性将阴影应用于文本。使您的文字烟熏和时尚 。该属性的值在下面提到

text-shadow property can take up to four values to further make the implication easy,

text-shadow属性最多可以包含四个值，以进一步简化含义，

Horizontal shadow
水平阴影
Vertical shadow
垂直阴影
Blur effect
模糊效果
Color
颜色

Syntax:

句法：

Element {
text-shadow: 3px 2px 2px #000000;
}

普通文字阴影 (Normal Text Shadow)

The Normal Text Shadow effect helps you add shadow to your text in a very basic method with not that much coding and easy implementing. This could be better understand with the help of an example.

普通文本阴影效果可帮助您以一种非常基本的方法在文本中添加阴影，而无需太多的编码并且易于实现。借助示例可以更好地理解这一点。

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #f40;
text-shadow: 3px 4px 4px #0011f3;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

Output

输出量

As you can see, in the above example, the normal text-shadow effect is applied and voila!

如您所见，在上面的示例中，将应用普通的文本阴影效果，瞧！

发光的文字效果阴影 (Glowing Text Effect Shadow)

It would be great if we could make our text glow as well. So, why wait and let us move forward with the Glowing text effect shadow property, this property is specifically for making the text to glow.

如果我们还可以使文本发光，那将是很棒的。因此，为什么要等待并让我们继续使用“发光文本效果”阴影属性，该属性专门用于使文本发光。

An example can surely help you understand better.

一个例子肯定可以帮助您更好地理解。

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #f40;
text-shadow: 0 0 4px #00FF9C;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

Output

输出量

So, you can see, in the above example, the glowing effect text-shadow is applied.

因此，在上面的示例中，您可以看到应用了发光效果text-shadow 。

Box Shadow属性 (Box Shadow Property)

Next, what if someone wants to apply this property to elements is the HTML? Well, Box Shadow Property has got you covered. This property is used to apply the shadow to elements in CSS. Even further the Box Shadow Property has its own set of values.

接下来，如果有人想将此属性应用于元素，那就是HTML？好吧，Box Shadow Property可以满足您的需求。此属性用于将阴影应用于CSS中的元素。更进一步，Box Shadow属性具有自己的一组值。

Values:

值：

The box-shadow property can take one to six values,

box-shadow属性可以采用一到六个值，

inset keyword (it changes the shadow to one inside of the frame)
inset关键字(将阴影更改为帧内的一个)
horizontal shadow
水平阴影
vertical shadow
垂直阴影
blur effect
模糊效果
spreading
传播
color
颜色

Syntax:

句法：

Element {
box-shadow: 10px 10px;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid;
padding: 30px;
box-shadow: 5px 10px 8px 10px #006969;
}
</style>
</head>
<body>
<div>
<p>Box shadow effect.</p>
</div>
</body>
</html>

Output

输出量