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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。