css3阴影 box-shadow
box-shadow
语法：text-shadow: x-shadow y-shadow distance color;
值 描述
x-shadow 必需。水平阴影的位置。允许负值。
y-shadow 必需。垂直阴影的位置。允许负值。
distance 可选。模糊的距离。 测试
color 可选。阴影的颜色
text-shadow
语法：box-shadow: x-shadow y-shadow distance size color inset/outset;
值 描述
x-shadow 必需。阴影水平偏移量，可正可负，正值表示阴影在右边，负值表示阴影在左边。
y-shadow 必需。阴影垂直偏移量，可正可负，正值表示阴影在上边，负值表示阴影在下边。
distance 可选。阴影模糊距离。只能为正值，值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊。
size 可选。阴影扩展半径。可正可负，正值表示整个阴影都延展扩大，负值表示缩小。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。
box-reflect
向框添加一个或多个倒影。
（1）direction：定义倒影的方向，取值包括：
above：倒影在对象的上边。
below：倒影在对象的下边。
left：倒影在对象的左边。
right：倒影在对象的右边。
（2）offset：定义倒影与对象之间的间隔，可正可负，默认为0。取值包括：
长度值
百分比（根据对象的尺寸进行确定）
（3）mask-box-image：定义遮罩图像，该图像将覆盖投影区域，默认为无遮罩。
<url>：使用绝对或相对地址指定遮罩图像。
<linear-gradient>：使用线性渐变创建遮罩图像。
<radial-gradient>：使用径向(放射性)渐变创建遮罩图像。
<repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。
<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像。
例子：
/*第一个是水平阴影的位置(10px就是阴影往右移10px; -10px就是往左移)，第二个是阴影垂直位置 第三个是模糊距离 第四个是阴影的颜色*/
text-shadow: 10px 0 10px purple;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> span{ text-shadow: 10px 0 10px purple; } </style> </head> <body> <span>React多年来一直主导Web开发，2018年它根本没有放慢速度。根据Stackoverflow 调查它仍然是最受欢迎的库之一。 核心React团队非常积极地更新库并添加功能。在整个2018年，我们看到了React v16版本的许多新增内容，包括新的[生命周期方法]，[新的上下文API]，[指针事件]，[惰性函数]和[React.memo]。 React Hooks 得到了一些响亮的反馈，很多开发人员喜欢这个更新。挂钩是一种使用该useState功能向功能组件添加状态的方法，它还将管理生命周期事件。 不会React的同学不要着急，下面有Vue何Angular的，统统都有。如果你想学，小编也找到了很多原生教程，这是链接，不过前提是你最好英语不错。</span> </body> </html> 
原文链接：https://www.qiquanji.com/post/8404.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知