发现果如父级使用了backdrop-filter，再在子级使用就不生效，最后发现可以使用伪类解决before 代码如下： .header { height: 1rem; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2); position: fixed; left: 0; right: 0; top: 0; z-in…
纯 CSS 实现优惠券透明圆形镂空打孔效果
我们在做商城类项目时，时常会有开发优惠券的需求，那么我们如何通过纯 CSS 来实现类似京东、淘宝的优惠券样式。 下面给大家分享一个纯 CSS 写的优惠券边沿透明圆形镂空打孔效果。最终效果大致如下： 使用了生成二维码和点击复制jquery.qrcode.min.js、clipboard.min.js两个插件 方法一 div{ width:300px;…
CSS 属性 user-select 控制用户能否选中文本。 HTML代码： <div class="wrapper"> <h1>Here's Your Code Snippet!</h1> <p>Click below to select all. Click again to clear so y…
解决iOS下button按钮样式渐变背景问题
解决width: 100%;再设置padding问题
解决width: 100%;再设置margin问题
div不定宽高的居中方式
不定宽使用css居中
只需要加上这个样式即可 .form_content .btn-submit{ width: 100%; padding: 1rem; background: #ff6471; color: #fff; border: none; line-height: 3rem; font-size: 1.5rem; -webkit-appearance:non…
在后面加上box-sizing: border-box;就OK了 .footer_nav{ width: 100%; overflow:hidden; margin-bottom:0; position:fixed; bottom:0; background: linear-gradient(to right, rgb(255, 103, 109)…
把width: 100%;改成width: calc(100% - 16px);就OK了 .footer_nav{ width: calc(100% - 16px); overflow:hidden; margin-bottom:0; position:fixed; bottom:0; background: linear-gradient(to …
方法1 .demo1{ position:absolute; top:50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 方法2 .demo2{ display: flex; align-items: center…
<div class="wrap"> <div class="index-title"> <div class="bd"> <div class="t"><i>标题</i>标题标题标题</div> <div class="p">内容内容内容内容内容内容内…