码迷,mamicode.com
首页 > Web开发 > 详细

CSS属性中的阴影属性

时间:2020-03-08 19:56:30      阅读:406      评论:0      收藏:0      [点我收藏+]

标签:oct   idt   doc   auto   文本   大小   模糊   距离   meta   

CSS3中的阴影属性包括文本阴影属性和盒子阴影属性。

一、文本阴影属性text-shadow

  书写方式:text-shadow:x  y   a   c;

       1)x代表的是水平方向的距离值(该值必须有,并且支持负值)

       2)y代表的是垂直方向的距离值(该值必须有,并且支持负值)

       3)a代表的是阴影的模糊程度(不支持负值)

       4)c代表的是阴影的颜色

  tips:只有水平和垂直方向支持负值

    x和y的位置不能互换

    可以用逗号分隔的方式进行多阴影设置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                border: 1px solid #888888;
                margin: 50px auto;
                font-size: 50px;
                text-align: center;
                text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
            }
        </style>
    </head>
    <body>
        <div>
            我会冒火噢
        </div>
    </body>
</html>

二、盒子阴影属性box-shadow

  书写方式:box-shadow:x  y   blur   spread color inset;

      1)x代表的是水平阴影的位置(该值必须有,并且支持负值)

      2)y代表的是垂直阴影的位置(该值必须有,并且支持负值)

      3)blur代表的是模糊距离,可选可不选

      4)spread代表的是阴影的大小,可选可不选

      5)color代表的是阴影的颜色

      6)从外层的阴影(开始时)改变阴影内侧阴影  可选可不选

  tips:水平和垂直方向允许设置负值

      可用逗号分隔的方式设置多阴影

     x和y的位置不能互换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                border: 1px solid #888888;
                margin: 50px auto;
                font-size: 50px;
                text-align: center;
                text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
                box-shadow: 10px 10px 20px 20px springgreen inset;
            }
        </style>
    </head>
    <body>
        <div>
            我会冒火噢
        </div>
    </body>
</html>

 

CSS属性中的阴影属性

标签:oct   idt   doc   auto   文本   大小   模糊   距离   meta   

原文地址:https://www.cnblogs.com/shewill/p/12444069.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!