137

20 个 CSS 高级技巧汇总

 7 years ago
source link: http://mp.weixin.qq.com/s/MavtDznPVECblDUTq_W-Rg
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Image

使用技巧会让人变的越来越懒,没错,我就是想让你变懒。下面是我收集的CSS高级技巧,希望你懒出境界。

1. 黑白图像

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



  1. img.desaturate {

  2.  filter: grayscale(100%);

  3.  -webkit-filter: grayscale(100%);

  4.  -moz-filter: grayscale(100%);

  5.  -ms-filter: grayscale(100%);

  6.  -o-filter: grayscale(100%);

  7. }

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

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



  1. /* add border */

  2. .nav li {

  3.  border-right: 1px solid #666;

  4. }

然后再除去最后一个元素



  1. // remove border /

  2. .nav li:last-child {

  3.  border-right: none;

  4. }

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



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

  2.  border-right: 1px solid #666;

  3. }

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

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



  1. .nav li:first-child ~ li {

  2.  border-left: 1px solid #666;

  3. }

3. 页面顶部阴影

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



  1. body:before {

  2.  content: "";

  3.  position: fixed;

  4.  top: -10px;

  5.  left: 0;

  6.  width: 100%;

  7.  height: 10px;

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

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

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

  11.  z-index: 100;

  12. }

4. 给 body 添加行高

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



  1. body {

  2.  line-height: 1;

  3. }

这样文本元素就可以很容易地从 body 继承。

5. 所有一切都垂直居中

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



  1. html, body {

  2.  height: 100%;

  3.  margin: 0;

  4. }

  5. body {

  6.  -webkit-align-items: center;  

  7.  -ms-flex-align: center;  

  8.  align-items: center;

  9.  display: -webkit-flex;

  10.  display: flex;

  11. }

看,是不是很简单。

注意:在IE11中要小心flexbox

6. 逗号分隔的列表

让HTML列表项看上去像一个真正的,用逗号分隔的列表:



  1. ul > li:not(:last-child)::after {

  2.  content: ",";

  3. }

对最后一个列表项使用 :not() 伪类。

7. 使用负的 nth-child 选择项目

在CSS中使用负的 nth-child 选择项目1到项目n。



  1. li {

  2.  display: none;

  3. }

  4. /* select items 1 through 3 and display them */

  5. li:nth-child(-n+3) {

  6.  display: block;

  7. }

8. 对图标使用 SVG

我们没有理由不对图标使用SVG:



  1. .logo {

  2.  background: url("logo.svg");

  3. }

SVG对所有的分辨率类型都具有良好的扩展性,并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。

9. 优化显示文本

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



  1. html {

  2.  -moz-osx-font-smoothing: grayscale;

  3.  -webkit-font-smoothing: antialiased;

  4.  text-rendering: optimizeLegibility;

  5. }

注:请负责任地使用 optimizeLegibility。此外,IE /Edge没有 text-rendering 支持。

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

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



  1. .slider ul {

  2.  max-height: 0;

  3.  overlow: hidden;

  4. }

  5. .slider:hover ul {

  6.  max-height: 1000px;

  7.  transition: .3s ease;

  8. }

11. 继承 box-sizing

让 box-sizing 继承 html:



  1. html {

  2.  box-sizing: border-box;

  3. }

  4. *, *:before, *:after {

  5.  box-sizing: inherit;

  6. }

这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。

12. 表格单元格等宽

表格工作起来很麻烦,所以务必尽量使用 table-layout: fixed 来保持单元格的等宽:



  1. .calendar {

  2.  table-layout: fixed;

  3. }

13. 用 Flexbox 摆脱外边距的各种 hack

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



  1. .list {

  2.  display: flex;

  3.  justify-content: space-between;

  4. }

  5. .list .person {

  6.  flex-basis: 23%;

  7. }

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

14. 使用属性选择器用于空链接

当a元素没有文本值,但 href 属性有链接的时候显示链接:



  1. a[href^="http"]:empty::before {

  2.  content: attr(href);

  3. }

相当方便。

15. 检测鼠标双击

HTML:



  1. <div class="test3">

  2.  <span><input type="text" value=" " readonly="true" />

  3.  <a href="http://renpingjun.com">Double click me</a></span>

  4. </div>



  1. .test3 span {

  2.  position: relative;

  3. }

  4. .test3 span a {

  5.  position: relative;

  6.  z-index: 2;

  7. }

  8. .test3 span a:hover, .test3 span a:active {

  9.  z-index: 4;

  10. }

  11. .test3 span input {

  12.  background: transparent;

  13.  border: 0;

  14.  cursor: pointer;

  15.  position: absolute;

  16.  top: -1px;

  17.  left: 0;

  18.  width: 101%;  /* Hacky */

  19.  height: 301%; /* Hacky */

  20.  z-index: 3;

  21. }

  22. .test3 span input:focus {

  23.  background: transparent;

  24.  border: 0;

  25.  z-index: 1;

  26. }

16. CSS 写出三角形



  1. /* create an arrow that points up */

  2. div.arrow-up {

  3.  width:0px;

  4.  height:0px;

  5.  border-left:5px solid transparent;  /* left arrow slant */

  6.  border-right:5px solid transparent; /* right arrow slant */

  7.  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */

  8.  font-size:0px;

  9.  line-height:0px;

  10. }

  11. /* create an arrow that points down */

  12. div.arrow-down {

  13.  width:0px;

  14.  height:0px;

  15.  border-left:5px solid transparent;

  16.  border-right:5px solid transparent;

  17.  border-top:5px solid #2f2f2f;

  18.  font-size:0px;

  19.  line-height:0px;

  20. }

  21. /* create an arrow that points left */

  22. div.arrow-left {

  23.  width:0px;

  24.  height:0px;

  25.  border-bottom:5px solid transparent;  /* left arrow slant */

  26.  border-top:5px solid transparent; /* right arrow slant */

  27.  border-right:5px solid #2f2f2f; /* bottom, add background color here */

  28.  font-size:0px;

  29.  line-height:0px;

  30. }

  31. /* create an arrow that points right */

  32. div.arrow-right {

  33.  width:0px;

  34.  height:0px;

  35.  border-bottom:5px solid transparent;  /* left arrow slant */

  36.  border-top:5px solid transparent; /* right arrow slant */

  37.  border-left:5px solid #2f2f2f; /* bottom, add background color here */

  38.  font-size:0px;

  39.  line-height:0px;

  40. }

17. CSS3 calc() 的使用

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



  1. /* basic calc */

  2. .simpleBlock {

  3.  width: calc(100% - 100px);

  4. }

  5. /* calc in calc */

  6. .complexBlock {

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

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

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

  10. }

18. 文本渐变

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



  1. h2[data-text] {

  2.  position: relative;

  3. }

  4. h2[data-text]::after {

  5.  content: attr(data-text);

  6.  z-index: 10;

  7.  color: #e3e3e3;

  8.  position: absolute;

  9.  top: 0;

  10.  left: 0;

  11.  -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)));}

19. 禁用鼠标事件

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



  1. .disabled { pointer-events: none; }

20. 模糊文本

简单但很漂亮的文本模糊效果,简单又好看!



  1. .blur {

  2.   color: transparent;

  3.   text-shadow: 0 0 5px rgba(0,0,0,0.5);

  4. }

Image

往期精彩回顾

ImageImage


Recommend

  • 32
    • www.cnblogs.com 4 years ago
    • Cache

    GAN训练技巧汇总

    GAN自推出以来就以训练困难著称,因为它的训练过程并不是寻找损失函数的最小值,而是寻找生成器和判别器之间的纳什均衡。前者可以直接通过梯度下降来完成,而后者除此之外,还需要其它的训练技巧。 下面对历年关于GAN的论文提出的...

  • 21
    • renfufei.blog.csdn.net 4 years ago
    • Cache

    CSS高级技巧:自动省略左侧文本

    难以置信! 浏览器和CSS规范居然支持自动省略左侧的文本了。 通过 text-overflow: ellipsis, 搭配固定的 width 属性, 以及overflow: hidden 样式, 就可以实现这样的功能; 能用CSS实现,就不需要编写复杂的 JavaScript 代...

  • 7
    • blog.uwa4d.com 4 years ago
    • Cache

    UWA学堂 | 高级课程汇总

    本栏目汇总了UWA学堂上所有高级课程并按类区分,会持续根据上新课程不断更新!初级课程传送门 | 中级课程传送门

  • 8

    Pycharm常用的小技巧汇总,Python新手上路必备,快上车! ...

  • 7
    • www.androidchina.net 3 years ago
    • Cache

    20个高级Java面试题汇总

    这是一个高级Java面试系列题中的第一部分。这一部分论述了可变参数,断言,垃圾回收,初始化器,令牌化,日期,日历等等Java核心问题。 什么是可变参数? 断言的用途? 什么时候使...

  • 8
    • www.woshizmt.cn 3 years ago
    • Cache

    西瓜视频直播卖货技巧大汇总

    一、直播准备工作 1、掌握直播功能使用 如何在直播中上架产品 ,熟悉下单完整流程。点击查看西瓜带货功能说明            

  • 3
    • blog.arstercz.com 3 years ago
    • Cache

    macos 技巧汇总

    Written by arstercz -  2021-10-28 macos 技巧汇总 最近用 macbook pro 办公之后, 碰到了很多使用上的问题. 本文主要用来整理并记录这些问题. 常用的效率工具

  • 13

    年底来了,很多小伙伴开始用表格汇总这一年的数据。但不知道大家是否遇到过被领导带质疑地反问: • 这个表格是要看什么?• 它的重点是哪里?• 这些数据看出什么趋势? 面对这样的疑问,你是不是不知所措?别急...

  • 10

    Vue 的这些技巧你真的都掌握了吗?(整理汇总 Vue 框架中重要的特性、框架的原理)前言文章目的昭然若揭 ‍ ,整理汇总 Vue 框架中重要的特性、框架的原理。那 "前车之鉴" 从何而来?是的,我又要讲小故事了,但这次是故事...

  • 6
    • www.cnblogs.com 1 year ago
    • Cache

    高级调试常见疑问汇总

    最新评论 1. Re:记一次 .NET 某新能源材料检测系...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK