各种CSS积累 | ҉҉҈淸鷠҉҉҈、

隐藏textarea input等输入框边框和选中出现边框

textarea {
    border: solid 0px;
	outline:none;
}

textarea 输入时光标直接定位到后面，且不会展示placeholder文本

这种情况是默认有空格在输入框中，解决方案比较奇葩，需要将标签写在同一行即可解决问题</p> <pre><code> <textarea placeholder="请输入文本"> </textarea>  <textarea placeholder="请输入文本"></textarea> </code></pre> <h2 id="图片或者页面-bulingbuling闪动效果">图片或者页面 bulingbuling闪动效果</h2> <pre><code>.flicker { /*width: 300px; */ /* 宽度 */ /*height: 300px; */ /* 高度 */ /*border:#666 1px solid;*/ /*border-radius:50%;*/ opacity: 0.1; /* 不透明度 */ overflow: hidden; /* 溢出隐藏 */ /* margin: 25% auto; */ /* 外边距 */ /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */ animation-name: breath; /* 动画名称 */ animation-duration: 700ms; /* 动画时长3秒 */ animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */ animation-iteration-count: infinite; /* 播放次数：无限 */ /* Safari and Chrome */ -webkit-animation-name: breath; /* 动画名称 */ -webkit-animation-duration: 3000ms; /* 动画时长3秒 */ -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */ -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */ } @keyframes breath { from { opacity: 0.1; } /* 动画开始时的不透明度 */ 50% { opacity: 1; } /* 动画50% 时的不透明度 */ to { opacity: 0.1; } /* 动画结束时的不透明度 */ } @-webkit-keyframes breath { from { opacity: 0.1; } /* 动画开始时的不透明度 */ 50% { opacity: 1; } /* 动画50% 时的不透明度 */ to { opacity: 0.1; } /* 动画结束时的不透明度 */ } </code></pre> <h2 id="去除textarea右下角角标">去除textarea右下角角标</h2> <pre><code>textarea { resize : none; } </code></pre> <h2 id="内容溢出显示滚动条">内容溢出显示滚动条</h2> <pre><code> overflow-x: auto;  overflow-y: auto;   ::-webkit-scrollbar{ width: 6px; }  ::-webkit-scrollbar-track{ -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3) ; border-radius: 10px; }  ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 2px #4d4b4b; } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 0, 0, 0.4); } </code></pre> <h2 id="当你想触发的事件被遮罩层挡住无法触发时">当你想触发的事件被遮罩层挡住无法触发时</h2> <p>之前做提交表单的时候，因为html原生提供的radio样式不满足客户要求，需要将基础样式替换成美工提供的小角标，我的思路比较简单，就是将小角标定位在默认控件的上面，遮罩住，然后点击时，通过判断点击是左右两个单选项的哪一个，来进行角标图片的切换即可，但是写完之后，发现当我点击右侧控件试图切换角标时，发现由于角标遮罩在控件上面，导致无法正常进行切换，控件并未触发。最后在一篇大佬的博客上找到了解决方案。当上面元素遮盖下面元素时无法触发下面元素的点击事件，需要给遮盖层加一个css属性：<br> <b>pointer-events: none</b></p> <h3 id="html">html</h3> <pre><code><label>性      别 <input onclick="clickSelect()" style="position: relative; width: 30px; height: 30px; margin-left: 50px; margin-right: 20px;" type="radio" name="sex" checked="true" value="male"> <image id="iconSelect1" width="30px" height="30px" style="position: absolute; margin: 10px 0 0 -58px;" src="./image/selectA.png"></image> </input>先生 <input onclick="clickSelect()" style=" position: relative; width: 30px; height: 30px; margin-left: 50px; margin-right: 20px;" type="radio" name="sex" value="female"> <image id="iconSelect2" width="30px" height="30px" style="pointer-events: none; position: absolute; margin: 10px 0 0 -58px;" src="./image/select.png"></image> </input>女士 </label> </code></pre> <h3 id="js">js</h3> <pre><code>function clickSelect() { var radioVal = $('input:radio:checked').val(); console.log('=====>', radioVal) if(radioVal == 'female') { $("#iconSelect2").attr('src', './image/selectA.png'); $("#iconSelect1").attr('src', './image/select.png'); } else { $("#iconSelect1").attr('src', './image/selectA.png'); $("#iconSelect2").attr('src', './image/select.png'); } } </code></pre> <p>pointer-events是css3的一个属性，指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）<br> 有两个常用属性<br> auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。<br> none——元素永远不会成为鼠标事件的target（目标）。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默认就可以穿透当前层，因为pointer-events默认为auto</p> </div> <div class="clear"></div> </section> </article> <div class="clear"></div> <section class="related section"> <article class="prev grid-50 tablet-grid-50 grid-parent"> <div class="thumb cover lazy loaded" style="background-image: url('https://qinyu312.github.io/media/images/DvBbddcIP.jpg');"></div> <a href="https://qinyu312.github.io/post/chang-yong-jie-kou-sui-ji/" class="full-link"></a> <div class="info"> <time datetime="2019-12-31">2019-12-31</time> <h4 class="title white no-margin">常用接口随记</h4> </div> <span class="epcl-button red"> <img src="https://qinyu312.github.io/media/images/left-arrow.svg" width="15" alt="Left Arrow"> </span> <div class="overlay"></div> </article> <article class="next grid-50 tablet-grid-50 grid-parent"> <div class="thumb cover lazy loaded" style="background-image: url('https://qinyu312.github.io/media/images/jR-y9fSIb.jpg');"></div> <a href="https://qinyu312.github.io/post/vue-router-lu-you-shou-wei/" class="full-link"></a> <div class="info"> <time datetime="2019-11-25">2019-11-25</time> <h4 class="title white no-margin">vue-router 路由守卫</h4> </div> <span class="epcl-button red"> <img src="https://qinyu312.github.io/media/images/right-arrow.svg" width="15" alt="Left Arrow"> </span> <div class="overlay"></div> </article> <div class="clear"></div> </section> <div class="clear"></div> <div id="comments" class="bg-white hosted "> <p>请到客户端“主题--自定义配置--valine”中填入ID和KEY</p> </div> <div class="clear"></div> </div> </div> </main> <footer id="footer" class="grid-container"> <div class="widgets row gradient-effect"> <div class="default-sidebar border-effect"> <div class="grid-33 tablet-grid-50 mobile-grid-100"> <section id="tag_cloud-2" class="widget widget_epcl_posts_thumbs underline-effect"> <h4 class="widget-title title white bordered">最新文章</h4> <article class="item post-0 post type-post status-publish format-standard has-post-thumbnail hentry"> <a href="https://qinyu312.github.io/post/ce-shi-yong-shu-ju/" class="thumb hover-effect"> <span class="fullimage cover" style="display:block;border-radius:50%;background-image: url('/media/images/custom-featureImage.gif');"></span> </a> <div class="info gradient-effect"> <time datetime="2021-03-22">2021-03-22</time> <h4 class="title usmall"> <a href="https://qinyu312.github.io/post/ce-shi-yong-shu-ju/">测试用数据</a> </h4> </div> <div class="clear"></div> </article> <article class="item post-1 post type-post status-publish format-standard has-post-thumbnail hentry"> <a href="https://qinyu312.github.io/post/chang-yong-xiao-gong-neng-feng-zhuang/" class="thumb hover-effect"> <span class="fullimage cover" style="display:block;border-radius:50%;background-image: url('/media/images/custom-featureImage.gif');"></span> </a> <div class="info gradient-effect"> <time datetime="2021-03-19">2021-03-19</time> <h4 class="title usmall"> <a href="https://qinyu312.github.io/post/chang-yong-xiao-gong-neng-feng-zhuang/">常用小功能封装</a> </h4> </div> <div class="clear"></div> </article> <article class="item post-2 post type-post status-publish format-standard has-post-thumbnail hentry"> <a href="https://qinyu312.github.io/post/aes-qian-hou-duan-jia-mi-shi-li/" class="thumb hover-effect"> <span class="fullimage cover" style="display:block;border-radius:50%;background-image: url('/media/images/custom-featureImage.gif');"></span> </a> <div class="info gradient-effect"> <time datetime="2021-03-18">2021-03-18</time> <h4 class="title usmall"> <a href="https://qinyu312.github.io/post/aes-qian-hou-duan-jia-mi-shi-li/">AES前后端加密实例</a> </h4> </div> <div class="clear"></div> </article> <div class="clear"></div> </section> </div> <div class="grid-33 tablet-grid-50 mobile-grid-100"> <section id="tag_cloud-2" class="widget widget_tag_cloud underline-effect"> <h4 class="widget-title title white bordered">标签云</h4> <div class="tagcloud"> <a href="https://qinyu312.github.io/tag/5Q5F33gv8/" class="ctag ctag-0 ctag-5Q5F33gv8" aria-label="">理财</a> <a href="https://qinyu312.github.io/tag/BWzUy10fo/" class="ctag ctag-1 ctag-BWzUy10fo" aria-label="">加解密</a> <a href="https://qinyu312.github.io/tag/5DuekNyj6/" class="ctag ctag-2 ctag-5DuekNyj6" aria-label="">java</a> <a href="https://qinyu312.github.io/tag/gb1IxfQz_/" class="ctag ctag-3 ctag-gb1IxfQz_" aria-label="">微信小程序</a> <a href="https://qinyu312.github.io/tag/lRh7oE3Ar/" class="ctag ctag-4 ctag-lRh7oE3Ar" aria-label="">Angular.js</a> <a href="https://qinyu312.github.io/tag/PP9Y5sIbi/" class="ctag ctag-5 ctag-PP9Y5sIbi" aria-label="">React.js</a> <a href="https://qinyu312.github.io/tag/glhfgA99X/" class="ctag ctag-6 ctag-glhfgA99X" aria-label="">兼容</a> <a href="https://qinyu312.github.io/tag/jR-y9fSIb/" class="ctag ctag-7 ctag-jR-y9fSIb" aria-label="">Vue.js</a> <a href="https://qinyu312.github.io/tag/DvBbddcIP/" class="ctag ctag-8 ctag-DvBbddcIP" aria-label="">Ajax</a> <a href="https://qinyu312.github.io/tag/M-CWASFwL/" class="ctag ctag-9 ctag-M-CWASFwL" aria-label="">js</a> <a href="https://qinyu312.github.io/tag/7CqQz0hXJ/" class="ctag ctag-10 ctag-7CqQz0hXJ" aria-label="">css</a> <a href="https://qinyu312.github.io/tag/RAus8PL4V/" class="ctag ctag-11 ctag-RAus8PL4V" aria-label="">blog</a> </div> <div class="clear"></div> </section> </div> <div class="grid-33 tablet-grid-50 mobile-grid-100"> <section id="epcl_about-2" class="widget widget_epcl_about underline-effect"> <h4 class="widget-title title white bordered">关于我</h4> <div class="avatar"> <a href="" class="translate-effect thumb"><span class="fullimage cover" style="background-image: url(https://qinyu312.github.io/images/avatar.png);"></span></a> </div> <div class="info"> <h4 class="title small author-name gradient-effect no-margin"><a href="">҉҉҈淸鷠҉҉҈、</a></h4> <p class="founder">万般皆苦，唯有自渡</p> <div class="social"> <a href="https://github.com/qinyu312/qinyu312.github.io" class="translate-effect" target="_blank"><i class="fa fa-github"></i></a> </div> </div> <div class="clear"></div> </section> </div> </div> <div class="clear"></div> </div> <div class="logo"> <a href="https://qinyu312.github.io"><img src="/media/images/custom-footerLogo.jpeg" alt=""></a> </div> <p class="published border-effect"> ©2019 共 24 篇文章 <br/> Theme <a href="https://gridea.dev/" target="_blank">「breek」</a> Powered by <a href="https://gridea.dev/" target="_blank">「Gridea」</a> </p> <a href="javascript:void(0)" id="back-to-top" class="epcl-button dark" style="display:none"> <i class="fa fa-arrow"></i> </a> </footer> <div class="clear"></div> <script src="https://qinyu312.github.io/media/js/functions-post.js"></script> </div>  </body> </html>