css.盒子阴影

最新推荐文章于 2024-03-12 21:35:36 发布

dibi9860

最新推荐文章于 2024-03-12 21:35:36 发布

阅读量55

点赞数

原文链接：http://www.cnblogs.com/qq547372511/p/5762954.html

版权

   div{ 
        width:100px;
        height:100px;
        font-size:212px;
        background-color:red;
        border-radius: 15px 24px 33px 42px;
        /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 



    }

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
    p{
        width:100px;
        height:100px;
        line-height:100px;
        text-align:center;
        border:4px dashed red;
        box-shadow:5px 5px rgba(0,0,0, .6);/*外阴影常规效果*/
        box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); /*外阴影模糊外延效果*/
        box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;/*内阴影效果*/

    }

    </style>
</head>
<body>
   <p>我要去湖南</p> 
</body>
</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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
        font-size:12px;
    }
    p{
        width:100px;
        height:100px;
        line-height:100px;
        text-align:center;
        border:4px dashed red;
        box-shadow:5px 5px rgba(0,0,0, .6);/*外阴影常规效果*/
        box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); /*外阴影模糊外延效果*/
        box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;/*内阴影效果*/

    }

    </style>
</head>
<body>
   <p>我要去湖南一个物体只能设置一种盒子阴影设置多中后</p> 
   

</body>
</html>
p{line-height:100px;}行高设置（当字的宽度宽过p的宽度时他再取一个p宽度跨出以为的字不占地盘)

2016-08-11

转载于:https://www.cnblogs.com/qq547372511/p/5762954.html

dibi9860

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css.盒子阴影

div{ width:100px; height:100px; font-size:212px; background-color:red; border-radius: 15px 24px 33px 42px; /* 四个半径值分别是左上角、右上角、右下角和左...
复制链接

扫一扫