css 去掉文本框阴影_CSS文本阴影和框阴影效果（带有示例）

css 去掉文本框阴影

With CSS3 you can create two types of shadows: text-shadow (adds shadow to text) and box-shadow (adds shadow to other elements).

使用CSS3，您可以创建两种类型的阴影： text-shadow (向文本添加阴影)和box-shadow (向其他元素添加阴影)。

CSS3文字阴影 (CSS3 Text Shadow)

The text-shadow property can take up to four values:

text-shadow属性最多可以包含四个值：

• the horizontal shadow
  水平阴影
• the vertical shadow
  垂直阴影
• the blur effect
  模糊效果
• the color
  颜色

例子： (Examples:)

Normal text shadow

普通文字阴影

h1 {
text-shadow: 2px 2px 5px crimson;
}

Glowing text effect

发光文字效果

h1 {
text-shadow: 0 0 4px #00FF9C;
}

多个阴影 (Multiple Shadows)

To achieve this, you simply add a comma between two (or more) sets of values:

为此，您只需在两组(或更多组)值之间添加一个逗号：

h1 {
	color: white;
	text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5;
}

CSS3盒子阴影 (CSS3 Box Shadow)

The box-shadow property can take up to six values:

box-shadow属性最多可以包含六个值：

• (optional) the inset keyword (changes the shadow to one inside the frame)

  (可选) inset关键字(将阴影在帧内更改为一个)

• the horizontal shadow
  水平阴影
• the vertical shadow
  垂直阴影
• the blur effect
  模糊效果
• the spreading
  传播
• the color
  颜色

例子： (Examples:)

.first-div {
	box-shadow: 1px 1px 5px 3px grey;
}

.second-div {
	box-shadow: 0 0 5px 1px lightgrey;
}

.third-div {
	box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75);
}

更多信息： (More Information:)

• MDN web docs

  MDN网站文档

• Check for browser support

  检查浏览器支持

• CSS box-shadow generator (feel free to experiment with box-shadows)

  CSS盒子阴影生成器 (随意尝试盒子阴影)

翻译自: https://www.freecodecamp.org/news/css-text-shadow-and-box-shadow-examples/

css 去掉文本框阴影