css一些不常见但很有用的属性操作大全-自学php网

css一些不常见但很有用的属性操作大全

来源：自学PHP网时间：2020-09-29 10:15 作者：小飞侠阅读:次

[导读] css一些不常见但很有用的属性操作大全...

今天带来css一些不常见但很有用的属性操作大全教程详解

1、自定义文本选择

::selection {
  background: red;
  color: black;
}

2、去掉video的controls中的下载按钮

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}

3、css3特性中的transform：translateZ(0)有什么作用

GPU加速，优化前端性能

4、滚动条样式修改

/* * 可以换其他选择器 */
*::-webkit-scrollbar {
    width: 2px;
  height: 2px;
}
*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #00063a;
}
*::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
  background: #00063a;
}

5、input type number 隐藏上下按钮

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"]{
    -moz-appearance: textfield;
}

6、css渐变虚框

7、border渐变色圆角

CSS使用BEM命名规范实践
下一篇：解决搜索框和搜索按钮button边框不能重合的问题

子栏目

css一些不常见但很有用的属性操作大全

最新评论

添加评论

更多文章推荐

添加评论