CSS3 新特性 box-shadow 阴影效果、圆角border-radius效果实现

2024-10-17 16:01:18 富士康质检员张全蛋

圆角

使用CSS3 border-radius属性，你可以给任何元素制作"圆角"，border-radius属性，可以使用以下规则：
（1）四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
（2）三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
（3）两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
（4）一个值：四个圆角值相同

如果想要图形变为圆角效果，只需要添加一个属性就行了，border-radius 这个属性。如果想圆的厉害那么这个值就变大一些。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
       div{
            width: 100px;
            height: 100px;
            background-color: rgb(151, 26, 49);
            border-radius: 10px;
       }
       img{
        width: 100px;
        height: 100px;
        border-radius: 10px;
       }
    </style>
</head>
<body>
   <div>
    <img src="../vue/1.jpg">
   </div>
</body>
</html>

如果想要变为圆形，那么就写100%就行了。

box-shadow 阴影效果

margin: 0 auto：上下不需要管，auto是让左右的空间平均分配，然后让盒子在中间，这就是居中。让左右空间的间隙平均分配就是auto的作用。

0代表水平方向没有阴影，第二个0代表垂直方向没有阴影，第三个是阴影的模糊度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        div{
            width: 500px;
            height: 500px;
            background-color: greenyellow;
            margin: 0 auto;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="d1">
    </div>
</body>
</html>

到此这篇关于CSS3 新特性 box-shadow 阴影效果、圆角border-radius的文章就介绍到这了,更多相关CSS3 新特性 box-shadow内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！