CSS3 边框样式，图像透明度

最新推荐文章于 2024-08-05 22:52:29 发布

深浅Java

最新推荐文章于 2024-08-05 22:52:29 发布

阅读量326

点赞数 1

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_46813809/article/details/120213946

版权

边框

属性	说明
border-image	设置边框的图像
border-radius	将边框的四角进行半径的变化
box-shadow	设置边框下拉的阴影

box-shadow：h  v  blur spread color inset;

h表示水平阴影的位置，允许负值。
v表示垂直阴影的位置，允许负值。
blur表示模糊距离。
spread表示阴影的大小
color表示阴影的颜色
inset表示从外侧阴影改变内侧阴影。

<style>
    div {
        width: 600px;
        height: 400px;
        color: red;
        margin: auto;
        background-color: seagreen;
        text-align: center;
        line-height: 400px;
        margin-top: 100px;
        border-radius: 20px;
        box-shadow: 13px 10px 20px rgb(112, 112, 112);
    }
</style>

<body>
    <div>
        这是一个div盒子
    </div>
</body>

图形变化

opacity透明度

opacity属性使图像具有透明，0-1之间，值越小，透明度强。

<style>
    div {
        width: 600px;
        height: 400px;
        color: red;
        margin: auto;
        background-image: url(./images/image.jpg);
        text-align: center;
        line-height: 400px;
        margin-top: 100px;
        border-radius: 20px;
    }
    
    div:hover {
        opacity: 0.7;
    }
</style>

<body>
    <div>
        这是一个图片，里面的图片会在鼠标划上去时产生透明现象
    </div>
</body>

图片透明

深浅Java

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 边框样式，图像透明度

边框属性说明border-image设置边框的图像border-radius将边框的四角进行半径的变化box-shadow设置边框下拉的阴影box-shadow：h v blur spread color inset;h表示水平阴影的位置，允许负值。v表示垂直阴影的位置，允许负值。blur表示模糊距离。spread表示阴影的大小color表示阴影的颜色inset表示从外侧阴影改变内侧阴影。<style> div {
复制链接

扫一扫