当前位置: 首页 > Web前端 > CSS

css实现的一些视觉效果

时间:2023-03-31 13:41:11 CSS

投影1.单边投影的思想是box-shadow的第四个长度参数。它位于模糊半径参数之后,称为膨胀半径。此参数将根据您指定的值扩大投影的大小,或者当指定负值时,缩小投影的大小。例如,-5px展开半径将使投影的宽度和高度各减少10px(即每侧5px)。框阴影:05px4px-4px黑色;2.相邻侧投影box-shadow:3px3px6px-3pxblack;3、双面投影使用两个投影(每边一个)来实现box-shadow:5px05px-5pxblack,-5px05px-5pxblack;不规则投影的解决方法是使用滤镜效果,滤镜。有很多值,例如blur()、grayscale()和drop-shadow()。使用drop-shadowfilter实现不规则投影:drop-shadow(2px2px10pxrgba(0,0,0,.5));注意:drop-shadow会在任何非透明部分投射阴影,包括文本。如果文字设置了text-shadow,就是projection的projection。染色效果方案一:为了解决给图片添加统一渲染风格的问题,使用filter滤镜,需要叠加一些滤镜的值。棕褐色滤镜,为图像添加不饱和的橙黄色调。饱和滤镜增加每个像素的饱和度。色调旋转过滤器将每个像素的色调偏移指定的程度。过滤器:棕褐色(1)饱和(4)色调旋转(295deg);原图:方案二:基于混合模式的方案。mix-blendmode可以设置整个元素的混合模式。background-blend-mode可以分别指定每个背景图层的混合模式。实现方法:a{background:hsl(335,100%,50%);}img{mix-blend-mode:luminosity;}毛玻璃效果

“摆脱诱惑的唯一方法[...]”
.bg{width:500px;高度:300px;背景:网址(“狗.jpg”);背景大小:封面;}主要{位置:相对;背景:hsla(0,0%,100%,.3);溢出:隐藏;}main::before{内容:'';位置:绝对;顶部:0;右:0;底部:0;左:0;过滤器:模糊(20px);°折叠角度的解决方案增加了一个深色三角形来实现折叠效果。实现的方法是再添加一层渐变来生成这个三角形,并将其定位在右上角,这样角的大小就可以通过background-size来控制了。div{背景:#58a;/*回退样式*/背景:线性渐变(到左下角,透明50%,rgba(0,0,0,.4)0)no-repeat100%0/2em2em,linear-gradient(-135deg,透明1.5em,#58a0);}