css3学习01

1.圆角边框(div的一个属性:border-radius)

  

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
  text-align:center;
  border:2px solid #a1a1a1;
  padding:10px 40px; 
  background:#dddddd;
  350px;
  border-radius:25px;
}
</style>
</head>
<body>

<div>有圆角的div</div>

</body>
</html>

  效果图:

2.边框阴影(box-shadow)

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    300px;
    height:100px;
    background-color:blue;
    box-shadow: 15px 15px 30px red;
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

  效果图:

  

 

box-shadow:

    水平阴影、垂直阴影、模糊距离,以及阴影的颜色

    第一个参数--水平阴影,向右移动距离
    第二个参数--垂直阴影,向下移动距离
    第三个参数--模糊距离,把阴影拉远、变模糊
    第四个参数--阴影颜色


原文地址:https://www.cnblogs.com/kylyww/p/6230369.html