网站建设我要自学网,建网站不花钱免费建站,一般使用的分辨率的显示密度最优是多少dpi,燕莎做网站一、css渐变背景添加透明度opacity
css渐变背景经常会在项目开发中遇到#xff0c;此时UI如果给出的是单一的渐变背景#xff08;没有背景透明度#xff09;#xff0c;这个我们会很快的写出代码#xff0c;如下: div classbtn这是一个按钮/div此时UI如果给出的是单一的渐变背景没有背景透明度这个我们会很快的写出代码如下: div classbtn这是一个按钮/div
.btn {background: linear-gradient(to right, #8B78E6, #50A5A5);color: #fff;padding: 10px 20px;font-size: 16px;border-radius: 5px;border: none;cursor: pointer;transition: background 0.3s ease;
}.btn:hover {background: linear-gradient(to right, #50A5A5, #8B78E6);
}
但偶尔的时候UI会给煎饼的背景色添加一个透明度但是使用opacity属性会导致文本也会有透明度接下来给出我的解决办法
.btn {position: relative;color: #fff;padding: 10px 20px;font-size: 16px;border-radius: 5px;border: none;cursor: pointer;transition: background 0.3s ease;z-index: 0;
}.btn:hover {background: linear-gradient(to right, #50A5A5, #8B78E6);
}.btn::after{position: absolute;z-index: -1;top: 0;left: 0;width: 100%;height: 100%;content: ;opacity: 0.3;background: linear-gradient(to right, #8B78E6, #50A5A5);
} 二、css按钮添加渐变边框
1、使用border-image
.btn {border: 4px solid;border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}/* 或者 */
.btn {border: 4px solid;border-image-source: linear-gradient(to right, #8f41e9, #578aef);border-image-slice: 1;
}
2、使用伪元素 div classborder-boxdiv classcontent这是一个使用伪元素实现渐变边框的按钮/div
/div
.border-box {border: 1px solid transparent;border-radius: 16px;position: relative;color: #F2B05E;background-color: #fff;background-clip: padding-box; /*important*/
}.border-box::before {content: ;position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: -1;margin: -1px;border-radius: inherit; /*important*/background: linear-gradient(to right, #8F41E9, #578AEF);
}
3、使用单个元素background-clip、background-origin、background-image
.border-box {border: 1px solid transparent;border-radius: 16px;color: #F2B05E;background-clip: padding-box, border-box;background-origin: padding-box, border-box;background-image: linear-gradient(to right, #fff,#fff), linear-gradient(90deg, #8F41E9, #578AEF);
}
background-clip 、background-origin属性添加了解释链接没弄清的童鞋可以点击看下~
分享完毕~~
