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
时间： 2024-10-13 12:47:19