DIV模糊的边缘和渐变的背景色

最新推荐文章于 2024-08-21 09:04:44 发布

xiao姝姝

最新推荐文章于 2024-08-21 09:04:44 发布

阅读量1.3w

点赞数 2

分类专栏： css 文章标签：渐变背景 DIV 模糊边缘 linear-gradient border-shdow

本文链接：https://blog.csdn.net/qq_42988963/article/details/82469538

版权

css 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

在网页中我们见到的一些边缘模糊的div或者边缘是模糊的图片，那这些都是怎么实现的呢？
1、通常我们可以设置boz-shadow（阴影）来实现，box-shadow一般格式：border：20px 20px 50px inset；表示。参数依次表示：水平阴影的移动位移，竖直方向阴影的移动位移，阴影的模糊程度。默认的阴影是在div外部的，最后一个参数可以不传入，inset表示将div的阴影设置在内部，不传入的话就是将阴影设置在外部。
补充：border边框的类型可以分为实线（solid）、虚线（dashed）、点线（dotted）和双线（double）。text-shdow用于设置文本阴影，box-show用于设置盒子阴影。
代码展示：

<style type="text/css">
.div1{
    width: 200px;
    height: 200px;
    background: skyblue;
    box-shadow:20px 20px 50px white inset;
    margin:100px;
}
.div2{
    width: 200px;
    height: 200px;
    background: pink;
    box-shadow:20px 20px 50px yellow;
    margin:100px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div1</div>
</body>

这里写图片描述
2、设置div的渐变色的背景一般使用linear-gradient属性，但是存在兼容性问题。
设置线性渐变的方向：to left：设置渐变为从右到左。to right：设置渐变从左到右。to top：
设置渐变从下到上。to bottom：设置渐变从上到下，这是默认值，不写入值就表示采用默认值。方向也可采用设置角度值的方式，例如30deg。
一般格式：linear-gradient(to bottom,colorStrat,colorEnd)第一个参数表示设置线性渐变的方向，第二个参数表示起始颜色，第三个参数表示结束颜色。也可以传入多个颜色，设置多个颜色的渐变色。
代码展示：

<style type="text/css">
.div1{
    width: 300px;
    height: 300px;
    background: linear-gradient(30deg,skyblue,deeppink,red);
    background: -moz-linear-gradient(30deg,skyblue,deeppink,red);/*兼容火狐*/
    background: -o-linear-gradient(30deg,skyblue,deeppink,red); /*兼容opera*/
    background:-webkit-gradient(linear,70% 0%, 20% 0% , from(skyblue),to(deeppink)); /*兼容Chrome、Safari*/
    /*webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );*/
    margin:50px;
}
.div2{
    width: 300px;
    height: 300px;
    background: linear-gradient(to left,yellow,lightgreen);
    margin:50px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>