div{
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