你不知道的css技巧

littleGrow 发布于2019-08-21 17:56 / 2079人阅读

摘要：支持算法和是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为宽高，会是为。然而，如果宽度设置为，高度设置为，将会等于而将会是。禁用鼠标事件

css黑科技

currentColor当前颜色

返回
.icon {
  display: inline-block;
  width: 16px; 
  height: 20px;
  background-image: url(http:jartto.wang/test.png);
  background-color: currentColor; /* 该颜色控制图标的颜色 */
  background-position: 0 0;
}
.link:hover {
  color: #333; /* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
}

vh、vw、vmin、vmax单位
浏览器的视口的宽、高被分为100份，1vh相当于浏览器高度的百分之一，即浏览器的高度为800px,则1vh=8px。
vw宽度同理。vh、vw支持calc算法

.box{
  height: calc(100vh - 50px);
}
h1 {
  font-size: 8vw;
}

vmin和vmax是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为
1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，
1vmin将会等于8px而1vmax将会是10.8px。

.box{
  height: calc(100vmax - 50px);
}

边框多个颜色

.box{
    border-style:solid;
    border-color:red green blue pink;
}

必须设置border-style才会有效果

css画小箭头
使用border和transparent属性实现

/*箭头向上*/
.arrow-up {
  width:0;
  height:0;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
  border-bottom:30px solid #fff;
}
/*箭头向下*/
.arrow-down {
  width:0;
  height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top:20px solid #0066cc;
}

图片滤镜效果
使用filter属性可以实现各种各样的图片效果，包括以下属性

grayscale 灰度
sepia 褐色
saturate 饱和度
hue-rotate 色相旋转
invert 反色
opacity 透明度
brightness 亮度
contrast 对比度
blur 模糊
drop-shadow 阴影

浏览器滚动条美化（仅支持webkit内核浏览器）

/*滚动条 start*/
::-webkit-scrollbar {
  width: 1px;
  height: 4px;
  background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background: #fff ;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  // background-color:rgba(7, 170, 247, 0.7);
  background-color: transparent;
}
::-webkit-scrollbar-thumb:hover {
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color:rgba(7, 170, 247, 1);
}

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

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

浏览器默认行高line-height一般为1.15倍，可以给body设置line-height:1来设置行高为1.0倍

body{
      line-height: 1;
}

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

li {
  display: none;
}
li:nth-child(-n+3) {
  display: block;
}

禁用鼠标事件

.disabled {
    pointer-events: none;
}

GPU云服务器云服务器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90225.html

你不知道的css技巧

摘要：支持算法和是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为宽高，会是为。然而，如果宽度设置为，高度设置为，将会等于而将会是。禁用鼠标事件 css黑科技 currentColor当前颜色返回 .icon { display: inline-block; width: 16px; height: 20px; background-im...

lpjustdoit 2019-08-02 15:59 评论0 收藏0
你不知道的css技巧

摘要：支持算法和是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为宽高，会是为。然而，如果宽度设置为，高度设置为，将会等于而将会是。禁用鼠标事件 css黑科技 currentColor当前颜色返回 .icon { display: inline-block; width: 16px; height: 20px; background-im...

MyFaith 2019-08-29 13:56 评论0 收藏0
你不知道的CSS（二）

摘要：用来控制表格单元格宽度你也许遇到过给表格设置了宽度，但是不起作用的问题。这是因为单元格的宽度是根据其内容进行调整的。显而易见的，默认情况下，单元格宽度受其内容约束。而设置了后，其单元格宽度变得可控了。本文首发于我的博客在上文《你不知道的CSS（一）》中，介绍了兄弟选择器美化表单，font-size:0消除间隙，overflow清除浮动，border绘制三角形等7个实用技巧。由于文章长...

sewerganger 2019-08-29 13:22 评论0 收藏0
你不知道的CSS（三）

摘要：本文首发于我的博客在前面两篇文章你不知道的一和你不知道的二中大致介绍了一些方面比较隐晦的但又很实用的技巧。系列文章你不知道的一你不知道的二本文首发于我的博客本文首发于我的博客在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇...

xiangzhihong 2019-08-29 13:28 评论0 收藏0