css边框渐变色和圆角,css3边框渐变效果
只用css实现了切角边框投影内容背景颜色渐变的所有效果。因为UI没有切背景，所以我以为这个理论上可以用css实现。
看看最终要达到的效果：
首先，先不说内容的紫蓝色渐变。一个简单的四角黑边轮廓投影，其实就是用网上铺天盖地的背景：线性-渐变实现切角和一层小1px的伪元素实现边框滤镜：框影投影。效果和代码如下：
html body div class= box /div/body style body { background-color:# 55486 b；} .box { margin:20px；宽度：200px高度：200pxz指数：0；背景：线性渐变(135度，透明计算(10px 1 * 0.414px)，#18121a 0)左上角，线性渐变(-135度，透明计算(10px 1 * 0.414px)，#18121a 0)右上角，线性渐变(-45度，透明计算(10px 1 * 0.414px)，#18121a 0)右下角，线性渐变(45度，透明计算(10px 1 * 0.414px)，# 1811背景尺寸：55% 50%；背景-重复：不重复；位置：相对；滤镜：投影(1px 1px 2px rgba(255，255，255，0.3))；} .box:在{ z-index: 1之后；宽度：calc(100%-2 * 1px)；高度：calc(100%-2 * 1px)；内容：“”；显示：块；背景：线性渐变(135deg，透明10px，#3c2f4f 0)左上角，线性渐变(-135deg，透明10px，#3c2f4f 0)右上角，线性渐变(-45deg，透明10px，#3c2f4f 0)右下角，线性渐变(45deg，透明10px，#3c2f4f 0)左下角。背景尺寸：55% 51%；背景-重复：不重复；位置：绝对；左：1pxtop:1px；} /style/html相当于把一个小的透明色和一个大的背景色在四个斜的方向上拼接起来实现的切角。背景尺寸应该大于50%以避免白线错误。在大div中设置一层小伪元素，实现边框。但是，由于四种背景色，似乎无法实现整个内容渐变。
要意识到内容区也是渐变的，换个思路。中间的伪元素背景是渐变的，四角被其他属性切掉了，所以还有其他的实现方式。我们先来看看：
方法一：mask遮罩
其他事情保持不变。在此之前，伪元素片的切割方式与外层相同。在这种思路下，垂直渐变是做不到的(因为切角已经用对角线透明颜色渐变做了)。然后，直接把背景色写成渐变，通过蒙版属性把四个角变透明：box:在{ z-index: 1之后；宽度：calc(100%-2 * 1px)；高度：calc(100%-2 * 1px)；内容：“”；显示：块；背景：线性梯度(180度，#3c2f4f，# 2e 2269)；-WebKit-mask:linear-gradient(135 deg，透明10px，#3c2f4f 0)左上角，linear-gradient(-135deg，透明10px，#3c2f4f 0)右上角，linear-gradient(-45deg，透明10px，#3c2f4f 0)右下角，linear-gradient(45deg，透明10px，#3c2f4f 0)左下角；-WebKit-mask-size:55% 51%；-WebKit-mask-repeat:no-repeat；位置：绝对；左：1pxtop:1px；}稍微改变一下上面代码中伪元素的样式，就实现了。
方法二：clip-path
clip-path属性可以直接修剪元素周围的边界。如果直接应用于伪元素，会发现投影也被覆盖。所以，换个思路，我们干脆不要伪元素层，直接把div修剪掉四个偷工减料就行了。因为滤镜属性是可以叠加的，所以在滤镜中加入了它的父元素，前n 1个投影叠加形成类似的黑色边框，最后一个投影用来实现淡白色投影。效果如下：
html body div class= outer div class= box /div/div/body style body { background-color:# 55486 b；} .外{滤镜：落影(0px 0px 1px #18121a)落影(0px 0px 1px #18121a)落影(0px 0px 1px #18121a)落影(2px 1px 3px rgba(255，255，255，0.3))；} .box { margin:20px；宽度：200像素高度：200像素边框半径：12px位置：相对；背景：线性梯度(180度、#3c2f4f、# 2e 2269)；-WebKit-clip-path:polygon(20px 0%，calc(100% - 20px) 0%，100% 20px，100% calc(100% - 20px)，calc(100% - 20px) 100%，20px 100%，0 calc(100% - 20px)，0 20px)；clip-path: polygon( 20px 0%，calc(100% - 20px) 0%，100% 20px，100% calc(100% - 20px)，calc(100% - 20px) 100%，20px 100%，0 calc(100% - 20px)，0 20px)；位置：相对；} /style/html不知道还有没有更简单且兼容性更好的方法~~~~
到此这篇关于半铸钢钢性铸铁(铸造半钢)实现切角边框投影内容背景色渐变效果的文章就介绍到这了，更多相关钢性铸铁背景色渐变内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。