51dev.com IT技术开发者社区

51dev.com 技术开发者社区

css颜色渐变在不同浏览器的设置

css颜色渐变在不同浏览器的设置

在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码:适用于谷歌浏览器:background:-webkit-gradient(linear,00,0100%,from(#4285fa),to(#366dcb));from:是指渐变起始颜色to:是指渐变...

SAE上无法加载css等文件

SAE上无法加载css等文件

如果你的SAE用到了这些文件,你会发现本地虽然能够运行成功,但是SAE上却无法加载。其实就是地址发生了变化,我们告诉SAE这些东西怎么找就可以了。例如我的css和js文件放在了app/static/文件夹下面,那么我们就在config.yaml中加入这些配置:handlers:-url:/stati...

css换肤总结

css换肤总结

两种可行的办法1.多套不同主题的css用less/sass变量代替颜色值,用编译工具生成主题文件theme-dark.csstheme-green.css切换文件使用,不要appendlink,直接修改原有theme的link的href,就行了//根据不同的企业用户加载不同的cssdocument....

css购物车(抛物线)运动

css购物车(抛物线)运动

抛物线动画的原理,就是用两个元素,子元素会继承父元素的运动,将父元素在横向运动,子元素在纵向运动,子元素会形成一种双向运动。而父元素在横向上是匀速运动,子元素在纵向上是变速运动,可以使用贝塞尔曲线来定义运动,二者合成,就能出现一个曲线运动。具体的曲线,跟选择的贝塞尔函数有关,调整好,就可以形成抛物线...

css动画常用属性总结

css动画常用属性总结

transition过渡动画,有4个属性:(1)transition-property:属性名称(2)transition-duration:间隔时间(3)transition-timing-function:动画曲线(4)transition-delay:延迟animation关键帧动画,有7个属...

webpack css压缩方案

webpack css压缩方案

css-loader原有的minimize选项在1.0.0版本已经移除,不能使用其进行css压缩。目前可行的css压缩方案有:1.postcss-loaderwithcssnanooruseoptimize-cssnano-pluginplugin2.postcsswithpostcss-clean...

IE9的大css文件截断问题

IE9的大css文件截断问题

最近做项目调试IE9的兼容性,遇到问题,样式应用不上去,在其他浏览器中是正常的。经过查找,判定是IE9的css截断问题。1.IE9截断判定方法1.打开IEDeveloperTools,在网络面板,进行捕获,抓取到的css文件是完整的2.打开IEDeveloperTools的HTML面板,在右侧样式面...

css命名冲突解决方法

css命名冲突解决方法

css的命名冲突目前有几种解决方法:1.命名约定人为的制定一下命名规则以避免冲突,例如前缀,嵌套等2.CSSinJS在JavaScript中写CSS,使用工具编译为css,最常见的是styled-components3.使用编译工具改变css类名最常见的是CSSModules4.HTML5的styl...

webpack的css,less,sass中使用绝对路径

webpack的css,less,sass中使用绝对路径

用法:使用~表示绝对路径,如下:@import"~otherfile.scss".yourClass{background:url('~img/wallpaper.png');}webpack中配置resolve的moduleDirectorires,modules,alias三种设置路径都可以,推...

css中按钮的四种状态

css中按钮的四种状态

css中按钮有四种状态1.普通状态2.hover鼠标悬停状态3.active点击状态4.focus取得焦点状态.btn:focus{outline:0;}可以去除按钮或a标签点击后的蓝色边框下面的例子中.btn1用focus按钮会按下,不弹起      .btn2用active按钮点击按下,会弹起&...

css技巧总结

css技巧总结

1. contenteditable属性的div的placeholder<divclass="input"contenteditableplaceholder="请输入文字"></div>.input:empty::before{content:attr(place...

css选择器位置和数量技巧

css选择器位置和数量技巧

1.除去首个元素li:not(:first-child)li+lili:first-child~li2.第1-3个元素li:nth-child(-n+3)3.除去第1-3个元素li:not(:nth-child(-n+3))4.第5-10个子元素tabletr:nth-child(n+5):nth-...

cssText批量修改样式

cssText批量修改样式

cssText所有浏览器都支持。cssText的使用    obj.style.cssText="width:200px;position:absolute;left:100px;";正如那篇文章所提cssText会清除之前元素含有的样式,所以得使用obj.style.cssText+="width...

css简写总结

css简写总结

1.font简写font-style|font-variant|font-weight|font-size|font-family.fontStyle{font:italicnormalbold12pxarial,verdana;}2.background简写background-color|bac...

css3动画总结

css3动画总结

1.transition的多个属性写法transition:width,height1s,1sease,ease;属性之间用逗号,设置之间用空格...