box-shadow属性的使用方法

时间 2019-11-18

标签 box shadow 属性使用方法繁體版

原文原文链接

语法：box-shadow:length length length colorcss

其中，前面三个length分别指阴影离开文字的横向距离、纵向距离和阴影的模糊半径，color 指阴影的颜色。html

一、三个值都为正数框架

<!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"/>
    <meta name="author" content="Chomo"/>
    <link rel="start" href="http://www.14px.com" title="Home"/>
    <title>利用box-sizing实现div仿框架</title>
    <style type="text/css">
         div{
             width: 200px;
             height: 100px;
             margin-left: 200px;
             margin-top:100px;
             background: #ffaa00;
             box-shadow: 10px 10px 10px gray;
         }
    </style>
</head>
<body>
<div> </div>
</body>
</html>

二、模糊半径为0时ui

<!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"/>
    <meta name="author" content="Chomo"/>
    <link rel="start" href="http://www.14px.com" title="Home"/>
    <title>利用box-sizing实现div仿框架</title>
    <style type="text/css">
         div{
             width: 200px;
             height: 100px;
             margin-left: 200px;
             margin-top:100px;
             background: #ffaa00;
             box-shadow: 10px 10px 0px gray;
         }
    </style>
</head>
<body>
<div> </div>
</body>
</html>

三、阴影离文字的距离为负值code

<!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"/>
    <meta name="author" content="Chomo"/>
    <link rel="start" href="http://www.14px.com" title="Home"/>
    <title>利用box-sizing实现div仿框架</title>
    <style type="text/css">
         div{
             width: 200px;
             height: 100px;
             margin-left: 200px;
             margin-top:100px;
             background: #ffaa00;
             box-shadow: -10px -10px 10px gray;
         }
    </style>
</head>
<body>
<div> </div>
</body>
</html>

四、阴影离文字的水平距离为0时，水平方向没有阴影（反之亦然）xml

<!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"/>
    <meta name="author" content="Chomo"/>
    <link rel="start" href="http://www.14px.com" title="Home"/>
    <title>利用box-sizing实现div仿框架</title>
    <style type="text/css">
         div{
             width: 200px;
             height: 100px;
             margin-left: 200px;
             margin-top:100px;
             background: #ffaa00;
             box-shadow: 0 10px 10px gray;
         }
    </style>
</head>
<body>
<div> </div>
</body>
</html>

五、阴影离文字的水平和垂直距离都为0htm

<!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"/>
    <meta name="author" content="Chomo"/>
    <link rel="start" href="http://www.14px.com" title="Home"/>
    <title>利用box-sizing实现div仿框架</title>
    <style type="text/css">
         div{
             width: 200px;
             height: 100px;
             margin-left: 200px;
             margin-top:100px;
             background: #ffaa00;
             box-shadow: 0 0 50px gray;
         }
    </style>
</head>
<body>
<div> </div>
</body>
</html>