常用的css技巧

haonanzhang      2022-02-07     555

关键词:

1. 黑白图像

这段代码会让你的彩色照片显示为黑白照片,是不是很酷?

img.desaturate {

    filter: grayscale(100%);

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

}

2. 使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

/* add border */

.nav li {

  border-right: 1px solid #666;

}

……然后再除去最后一个元素……

// remove border /


.nav li:last-child {

  border-right: none;

}

……可以直接使用 :not() 伪类来应用元素:

.nav li:not(:last-child) {

  border-right: 1px solid #666;

}

这样代码就干净,易读,易于理解了。

当然,如果你的新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):

..nav li:first-child ~ li {


  border-left: 1px solid #666;

}

3. 页面顶部阴影

下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果:

body:before {

          content: "";

          position: fixed;

          top: -10px;

          left: 0;

          width: 100%;

          height: 10px;


          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          box-shadow: 0px 0px 10px rgba(0,0,0,.8);


          z-index: 100;

}

4. 给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:

body {

  line-height: 1;

}

5. 所有一切都垂直居中

要将所有元素垂直居中,太简单了:

html, body {

  height: 100%;

  margin: 0;

}


body {

  -webkit-align-items: center;  

  -ms-flex-align: center;  

  align-items: center;

  display: -webkit-flex;

  display: flex;

}

看,是不是很简单。

注意:在IE11中要小心flexbox。

6. 优化显示文本

有时,字体并不能在所有设备上都达到最佳的显示,所以可以让设备浏览器来帮助你:

html {

  -moz-osx-font-smoothing: grayscale;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}

 

7.对纯 CSS 滑块使用 max-height

使用 max-height 和溢出隐藏来实现只有CSS的滑块:

.slider ul {

  max-height: 0;

  overlow: hidden;

}


.slider:hover ul {

  max-height: 1000px;

  transition: .3s ease;

}

8、用 Flexbox 摆脱外边距的各种 hack

.list {

  display: flex;

  justify-content: space-between;

}


.list .person {

  flex-basis: 23%;

}

当需要用到列分隔符时,通过flexbox的 space-between 属性,你就可以摆脱nth-,first-,和 last-child 的hack了:

现在,列表分隔符就会在均匀间隔的位置出现。

 9、CSS3 calc() 的使用

calc() 用法类似于函数,能够给元素设置动态的值:

/* basic calc */

.simpleBlock {

  width: calc(100% - 100px);

}


/* calc in calc */

.complexBlock {

  width: calc(100% - 50% / 3);

  padding: 5px calc(3% - 2px);

  margin-left: calc(10% + 10px);

}

9、文本渐变

文本渐变效果很流行,使用 CSS3 能够很简单就实现:

h2[data-text] {

  position: relative;

}

h2[data-text]::after {

  content: attr(data-text);

  z-index: 10;

  color: #e3e3e3;

  position: absolute;

  top: 0;

  left: 0;

  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

10、禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

 

常用的css技巧

摘要:1.div的垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字,就垂直居中了。缺点是要控制内容不要换行2.margin加倍的问题设置为float的div在ie下1.div 的垂直居中问题vertical-align:middle;将... 查看详情

常用css动画制作技巧及踩坑总结

1.CSS3d透视perspective属性都是加给父元素的transform-style:preserve-3d;这个属性必须与transform一同使用,它使被转换的子元素保留其3D转换(即设置给父元素)<!--这里是一个简单的透视的例子--><divclass="door-border"><divclass="door... 查看详情

前端优化常用技巧

1:压缩css,js,图片等资源2:减少http请求;合并css,js,合并图片3:减少CDN4:减少dom元素数量5:图片懒加载6:静态资源另外用无cookie的域名7:减少dom的访问(缓存dom)8:巧用时间委托9:样式表置顶;脚本置底 按顺序来记忆:... 查看详情

前端必会的html+css常用技巧之虚线的特殊实现方式(代码片段)

前端必会的HTML+CSS常用技巧之虚线的特殊实现方式利用边框border属性利用background的linear-gradient属性上下左右矩形利用边框border属性这个属性比较简单<divclass="dashed">利用边框borderdashed属性实现虚线</div><divcla... 查看详情

前端常用css小技巧

 注意:以下前缀兼容性写法注释-o-:Opera-ms://IE10-moz://火狐-webkit://Safari4-5,Chrome1-91. 去除iOS移动端input,textarea输入框聚焦时上方内阴影样式input,textarea,select{appearance:none;-moz-appearance:none;//Firefox-webkit-appe 查看详情

css总结常用技巧

css一行显示  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;css多行显示display:-webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2; 查看详情

csshack技术介绍及常用的hack技巧(代码片段)

一、什么是CSSHack?不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSSHack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS代码的过程,就叫CSSHack。CSSHack常见的... 查看详情

十几个css高级常见技巧汇总(虚线框三角形优惠券卡券滚动条多行溢出...)...

...天来分享一些比较高级复杂的CSS技巧,都是我们平常常用的,或许对你有所帮助。设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时设置方位情况相邻兄弟选择器之常用场景outline属性的妙... 查看详情

26个常用易忘css小技巧(代码片段)

收集于平时常用但易忘的CSS实现方法,如有遗漏或补充,还请指正!解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移.wrapdisplay:inline-block;overflow:hiddenvertical-align:bottom复制代码超出部分显示省略号//单行文本.wrapove... 查看详情

前端必会的html+css常用技巧之虚线的实现方式(代码片段)

前端必会的HTML+CSS常用技巧之虚线的特殊实现方式利用边框border属性利用background的linear-gradient属性上下左右矩形利用边框border属性这个属性比较简单<divclass="dashed">利用边框borderdashed属性实现虚线</div><divcla... 查看详情

前端必会的html+css常用技巧之移动端1px边框(代码片段)

目录写在开头物理像素(physicalpixel)设备独立像素(device-independentpixel)设备像素比(devicepixelratio)移动端1px边框的解决方案方案一方案二方案三写在末尾写在开头正文之前,我们需得了解几个重要的名词:物理像素、设备独立... 查看详情

css布局技巧之——各种居中

...要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1.把margin设为auto具体... 查看详情

css布局技巧之——各种居中

...要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1.把margin设为auto具体... 查看详情

css布局技巧之——各种居中

...要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1.把margin设为auto具体... 查看详情

css高级技巧,包括精灵图字体图标及常见布局技巧

...握精灵图、字体图标的使用,单行溢出显示省略号和一些常用的布局技巧!今日框架:今日重点:一、精灵图:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度1)精灵图又称雪碧图,CSSSprites2)将网页中需要... 查看详情

《css动画实用技巧》课程笔记

概述这是我学习CSS动画实用技巧的课程笔记常用动画属性——transition.changeimg{display:block;width:300px;height:284px;opacity:0;-webkit-transform:translate(-100px,-100px);-webkit-transition:opacity1sease-in-out0.5s,-webkit-transf 查看详情

css动画制作的12个技巧

...0c;我们用CSS去做样式、定位并创建出好看的网站。我们经常用CSS去添加页面的运动过渡效果甚至动画,但我们经常做的东西不会超过这些。动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限... 查看详情

使用idea的常用的技巧

常用的技巧1.比如说,我们在设置maven的本地仓库的时候,有一种的设置是通用的,也是一劳永逸的,如下图:然后,点击下面的"OK",这样的话,在创建新的项目的时候,就不需要在重新设置maven的配置了。  查看详情