CSS3
麦兜_冰夕
这个作者很懒,什么都没留下…
展开
-
全站置灰实现css代码
全站置灰实现css代码html{ filter:grayscale(90%)}原创 2022-12-01 16:03:58 · 191 阅读 · 0 评论 -
css实现矩形四个边角特效
先贴效果图如下:对应css代码如下:.total-item-inner{ width: 310px; height: 108px; padding: 16px; background: linear-gradient(to left, #0DD7B5, #0DD7B5) left top no-repeat, linear-gradient(to bottom, #0DD7B5, #0DD7B.原创 2022-05-07 10:31:16 · 1931 阅读 · 1 评论 -
设置了背景图,但是第一次hover会闪烁,该如何解决
直接上代码,如下所示.gobackBtn { display: inline-block; margin-right: 20px; width: 30px; height: 30px; cursor: pointer; background-image: url('原创 2021-11-17 16:42:50 · 2462 阅读 · 0 评论 -
移动端吸顶效果
在uni-app中,实现页面吸顶效果,须在pagex.vue中如下实现.stickyTop { position: -webkit-sticky; position: sticky; top: 0rpx; z-index: 99; }原创 2021-08-19 10:34:44 · 228 阅读 · 0 评论 -
img标签元素随父div等比例缩放
.div { width: 55%; img { width: auto; height: auto; max-width: 100%; max-height: 100%; }}原创 2021-07-07 16:19:05 · 1299 阅读 · 0 评论 -
vue scoped后无法修改elementUI组件样式
问题:在app.vue中引入公共样式mainStyle.css文件对input的width已做设置,在page.vue页面对el-input的width需单独设置宽度,设置完后不生效,生效的为ainStyle.css文件对input的width,对应page.vue页面代码如下<template> <div> <el-input class="groupName" placeholder="请输入" auto-complete="off">&原创 2020-08-24 17:40:36 · 655 阅读 · 0 评论 -
去除火狐、ie浏览器默认a标签虚线框
a{ outline:none;}原创 2020-05-28 11:22:07 · 226 阅读 · 0 评论 -
消除input、button点击后默认激活样式
button:focus, input:focus{ outline:none;}原创 2020-05-19 11:29:08 · 1955 阅读 · 0 评论 -
css实现三角动态翻转
.accordion{ background-color: transparent; width:0; height:0; border: 6px solid transparent; border-top-color: #0ACCE0 ; ...原创 2020-01-06 11:06:55 · 643 阅读 · 0 评论 -
背景为图片的按钮css实现按钮背景图置灰
.l-btn-disabled { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: pr...原创 2019-08-23 15:24:28 · 1829 阅读 · 0 评论 -
css解决浏览器输入框记住账号密码后的背景色
谷歌chrome浏览器在用户登录记住密码之后通常会改变input框的背景色,这是每一个程序猿不想看到的事情,下面提出解决这个问题的方法之一:↓ ↓ ↓css代码:input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #eded...原创 2019-05-22 18:34:30 · 736 阅读 · 0 评论 -
【转载】flex:1;详解
原文地址:https://segmentfault.com/q/1010000004080910/a-1020000004121373仅供参考!首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况:flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值,则 flex 的默认值是 0 1 auto。同理,如下...转载 2018-05-30 11:28:43 · 4504 阅读 · 0 评论 -
placeholder 颜色设置浏览器兼容性
/* WebKit browsers */input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } /* Mozilla Firefox 4 to 18 */input:-moz-placeholder, textarea:-moz-placeholder { color: #66...原创 2018-05-09 15:55:57 · 3340 阅读 · 0 评论 -
去除select的默认样式
select::-ms-expand { display: none; }.searchSite select { border: 2px solid rgba(255,255,255,0.6); border-radius: 3px; appearance: none; -webkit-appearance: none; -moz-appearance:...原创 2017-12-19 17:22:01 · 1042 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢...原创 2018-01-29 09:40:36 · 166 阅读 · 0 评论 -
绝对定位和浮动会脱离文档流
1.脱离文档流position: absolute; //绝对定位float: left; //浮动2.不会脱离文档流position: relative; //相对定位原创 2018-02-09 11:00:50 · 2716 阅读 · 0 评论 -
定位absolute、relative与浮动float的区别及脱离文档流
position取值absolute、relative与浮动float三者的区别属性是否脱离文档流是否占位是否影响周围元素在文档流中的位置relative否是否absolute是否否float是否是所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。...原创 2018-04-03 17:58:21 · 2758 阅读 · 0 评论 -
改变select组件默认样式及option背景色
1.清除select组件原有样式-webkit-appearance: none; /* google */-moz-appearance: none; /* firefox */appearance: none; /* IE */2.设置新样式及option背景色background: #080F17 url(../../common/image/triangel.png)...原创 2018-04-04 14:04:53 · 50769 阅读 · 0 评论 -
网页背景自适应及响应式实现,不随浏览器窗口变化产生空白
body{ width: 100%; height: 100%; background-image: url("../../common/image/backgroundimage.svg"); background-repeat: no-repeat; background-position: center; background-attachme...原创 2018-04-17 14:20:01 · 557 阅读 · 0 评论 -
获取input type=file的文件名及input type=file获取文件名的浏览器,设置input type=file样式
获取input type=file的文件名方法:let filePath = $("input[type = 'file']").val(); //获取路径let urlArr = filePath.split("\\"); //以反斜杠'\'截取文件名为数组 let fileNam...原创 2018-04-23 18:57:43 · 10954 阅读 · 0 评论 -
@keyframes嵌套在@media中IE浏览器兼容问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>@keyframes嵌套在@media中IE浏览器兼容问题</title> <script src="./jquer原创 2018-04-20 14:28:18 · 3452 阅读 · 0 评论 -
opacity属性兼容问题
目前主流浏览器 Opera 9.0+,Safari 1.2(WebKit 125) +,chrome、firedox、IE11等等都支持opacity这个透明度属性。因此现在全兼容写法只需要兼顾IE6、IE7、IE8opacity{ opacity:0.5; filter:alpha(opacity=50); //filter 过滤器 兼容IE678}...原创 2018-05-02 15:17:41 · 3920 阅读 · 0 评论 -
20 个 CSS 高级技巧汇总
20 个 CSS 高级技巧汇总 JavaScript使用技巧会让人变的越来越懒,没错,我就是想让你变懒。下面是我收集的CSS高级技巧,希望你懒出境界。1. 黑白图像这段代码会让你的彩色照片显示为黑白照片,是不是很酷?img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-fil...原创 2017-12-01 10:09:02 · 297 阅读 · 0 评论