CSS3新特性：圆角和阴影

echofly0722

已于 2024-03-29 17:19:06 修改

阅读量379

点赞数 10

文章标签： css3 前端 css

于 2024-03-29 17:17:22 首次发布

本文链接：https://blog.csdn.net/flyffffly/article/details/137150478

版权

圆角

我们经常看到的搜索框都是圆形的，那么是怎么实现的呢，这就是css3的新特性，圆角

他有四个方向的属性，分别为以下：

属性（单位为px）	属性描述
border-top-left-radius	左上方圆角程度
border-bottom-left-radius	左下方圆角程度
border-bottom-right-radius	右下方圆角程度
border-top-right-radius	右上方圆角程度

代码示例：

<style>
    div{
        width: 500px;
        height: 36px;
        /*background-color: aqua;*/
        border: 2px solid red;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
    }
</style>
<body>
    <div>

    </div>
</body>

效果如下：

我们也可以来绘制一个正圆：

<style>
    div{
        width: 500px;
        height: 500px;
        border: 2px solid red;
        border-top-left-radius: 251px;
        border-bottom-left-radius: 251px;
        border-bottom-right-radius: 251px;
        border-top-right-radius: 251px;
    }
</style>
<body>
    <div>

    </div>
</body>

效果如下：

当绘制正圆的时候，每个方向的属性值应设定为该正方形宽度的一半。

当然，还有更简单的属性：border-radius,它可以接受四种属性值。

它设置圆形就比较简单了：border-radius：50%；

border-radius使用方法类似 border-radius: 100px 100px 100px 100px;

接下来将给出具体属性值和描述：

属性值	描述
一个值，如border-radius: 100px	四个圆角值相同
两个值，如border-radius: 100px 100px	第一个值为左上角与右下角，第二个值为右上角与左下角
三个值，如border-radius: 100px 100px 100px	第一个值为左上角,第二个值为右上角和左下角，第三个值为右下角
四个值，如border-radius: 100px 100px 100px 100px;	第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角

阴影

阴影也是现在特别常用的属性，可以让图片或者元素更加美观。

它的属性设置为：

box-shadow ：向框添加一个或多个阴影。

box-shadow:h-shadow v-shadow blur color;

值	描述
h-shadow	必选，水平阴影的位置
v-shadow	必选，垂直阴影的位置
blur	可选，模糊距离
color	可选，阴影的颜色

代码示例：

<style>
    div{
        width: 300px;
        height: 300px;
        background-color: blue;
        box-shadow: 10px 10px 50px red;
        margin: 0 auto;
    }
</style>
<body>
    <div>

    </div>
</body>

效果如下：