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

css.盒子阴影

时间:2016-08-12 00:45:56      阅读:529      评论:0      收藏:0      [点我收藏+]

标签:


   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

css.盒子阴影

标签:

原文地址:http://www.cnblogs.com/qq547372511/p/5762954.html

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