CSS小技巧

作者:南丞 时间:2018-01-16 15:00

CSS高级技巧

  • 黑白图像

这段代码会让你的彩色照片显示为黑白照片:

img.desaturate {
  filter: grayscale(100%);
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -o-filter:grayscale(100%);
}

  • 使用:not() 在菜单上应用/取消应用边框
.nav li {
  border-right: 1px solid #666
}

然后再除去最后一个元素

.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
}
  • 页面顶部阴影

下面这个简单的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);
}
  • 给body 添加行高

你不需要分别添加line-height 到每一个p,h 标记等。

body {
  line-height:1;
}

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

  • 所有一切都垂直居中

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

html,body{
    height: 100%;
    margin: 0;
  
}

body {
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  display:-webkit-flex;
  display:flex;
}
  • 逗号分隔的列表

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

  ul>li:not(:last-child)::after {
    content: ",";
  }
  • 使用负的nth-child 选择项目

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

li {
  display:none;
}

li:nth-child(-n+3) {
  display:block;
}
  • 对图标使用svg
.logo{
  background:url('logo.svg')
}

svg对所有的分辨率类型都具有良好的扩展性

  • 优化显示文本

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

html {
  -moz-osx-font-smoothing:grayscale;
  -webkit-font-smoothing:antialiased;
  text-redering:optimizeLegibility;
}

  • 对纯CSS滑块使用max-height

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

.slider ul {
  max-height:0;
  overlow:hidden;
}

.slider:hover ul {
  max-height:1000px;
  transition: .3s ease;
}

  • 继承 box-sizing

让 box-sizing 继承 html:

  html {
    box-sizing: border-box;
  }

  *,*:before, *:after {
    box-sizing:inherit;
  }
  • 表格单元格等宽

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

  .calendar{
    table-layout: fixed;
  }
  • 用Flexbox 摆脱外边距的各种hack

当需要用列分隔符是,通过flexbox的 space-between属性

.list {
  display:flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

  • 使用属性选择器用于空连接

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

a[href="http"]:empty::before {
  content: attr(href)
}
  • 检测鼠标双击
<div class="test3">
<span><input type="text" value="" readonly="true"></span>
<a href="">单机</a>
</div>

CSS:

.test span {
  position: relative;
}

.test3 span a {
  position: relative;
  z-index:2;
}

.test2 span a:hover,.test3 span a:active {
  z-index: 4;
}

.test3 span input {
  background: transparent;
  border:0;
  cursor:pointer;
  position:absolute;
  top:-1px;
  left:0;
  width:101%;
  height:301%;
  z-index:3;
}
.test3 span input:focus {
  border: transparent;
  border:0;
  z-index:1;
}

  • 禁用鼠标事件

CSS3 新增的pointer-events 让你能够禁用元素的鼠标事件

.disabled {pointer-events: none;}

  • 模糊文本
.blur {
  color: transoarent;
  text-shadow:0 0 5px rgba(0,0,0,0.5)
}

评论:

回到顶部
回到顶部