15.5 文本阴影
text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
解释:text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。
值描述h-shadow必需,水平阴影的位置,允许负值。v-shadow必需,垂直阴影的位置,允许负值。blur可选,模糊的距离。color可选,阴影的颜色 描述:
- 文字阴影可以有多组值,多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边,负值在左边
- 垂直阴影正值阴影在下边,负值在上边
- 模糊强度,值越大越模糊
案例
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>文本阴影</title>
- <style type="text/css">
- .box{
- font-size: 40px;
- font-family: "楷体";
- color: #7B68EE;
- /*给文本设置阴影*/
- /*text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色*/
- text-shadow: 3px 3px 3px #90EE90;
- }
- .box_two{
- font-size: 50px;
- font-family: "隶书";
- color: #008B00;
- text-shadow: 4px 2px 2px #FF69B4,-4px -4px 3px #C1CDC1;
- }
- </style>
- </head>
- <body>
- <div class="box">黑马程序员</div>
- <div class="box_two">江苏科技大学JUST</div>
- </body>
- </html>
复制代码
15.6 盒子阴影
box-shadow:水平阴影 垂直阴影 阴影的清楚度 阴影的巨细 阴影的颜色 阴影的位置 inset outset(默认值)
水平阴影和处置惩罚阴影必须得写,其余的是可以省略不写的。
语法:
box-shadow: h-shadow v-shadow blur spread color inset
解释:box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值为0.
值描述h-shadow必需,水平阴影的位置,允许负值。v-shadow必需,垂直阴影的位置,允许负值。blur可选,模糊的距离。spread可选,阴影的尺寸。color可选,阴影的颜色inset可选,将外部阴影(outset)改为内部阴影 描述:
- 盒子阴影可以有多组值,多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边,负值在左边
案例一:盒子阴影
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>盒子阴影</title>
- <style type="text/css">
- .box{
- width: 100px;
- height: 100px;
- border:1px solid #000;
- /*给这个盒子设置阴影
- 语法格式:
- box-shadow:水平阴影 垂直阴影 阴影的清晰度 阴影的大小 阴影的颜色 阴影的位置 inset outset(默认值)
- */
- box-shadow: 3px 3px 3px 3px #f00,-4px -4px 2px 2px #DA70D6 inset;
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
复制代码
案例二:给图片设置阴影
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>给图片设置阴影</title>
- <style type="text/css">
- img{
- box-shadow: 6px 6px 6px 6px #FFA07A;
- }
- </style>
- </head>
- <body>
- <img src="../img/jyff1.jpg" alt="">
- </body>
- </html>
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |