css3圆角属性，css3圆角阴影的写法

阅读量： 7 发布日期： 2022-10-27 08:55:18

随着网络技术的发展，越来越多的网络设计师开始使用css3来创建美丽而独特的网站。Css3提供了许多新功能，包括圆角。

1、css3圆角属性

目前，CSS3的新属性border-radius可以轻松实现圆角效果。该属性有两个参数，第一个参数是水平方向的半径，第二个参数是垂直方向的半径。如果省略了第二个参数，则该参数将被设置为与第一个参数相等。

2、css3圆角边框

这是一段关于css3圆角边框的内容。

3、css3圆角效果的写法

CSS3 圆角可以使用下面的属性来实现：

圆角的方块：

border-radius:10px;

实心上半圆：

#box{
    width:80px;
    height:40px;/*宽度的一半*/    background:skyblue;
    border-radius:40px 40px 0 0;/*4个值分别代表上、右、下、左*/}

实心圆：

#box{
    width:80px;
    height:80px;
    background:skyblue;
    border-radius:40px;
}

实心左半圆形：

#box{
    width:40px;
    height:80px;
    background:skyblue;
    border-radius:40px 0 0 40px;
}

4、css3 圆角阴影的写法

CSS3 圆角阴影的写法和 CSS3 圆角边框的写法类似，只是多了一个 box-shadow 属性，支持添加一个或者多个。

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px #666;
 }

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px -3px #666;
}

X轴偏移量为负数：

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:-5px 5px 5px #666;
}

Y轴偏移量为负数：

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:5px -5px 5px #666;
}

外阴影：

#box{
     width:50px;
     height:50px;
     background:green;
     box-shadow:5px 4px 10px #666;
}

内阴影：

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset;
}

圆角可以为任何网站添加一点优雅，并且使用css3很容易创建。只需将适当的代码添加到样式表中，您的圆角就会自动圆角。

作者: bosscms，转载时必须经得同意并以链接形式注明作者和原始出处及本声明。

CSS样式

热点推荐