聊聊css中的一些实用属性操作

发布时间：2022-11-14 11:12:11 所属栏目：语言来源：

导读：　　本文主要给大家分享一下css中的一些实用属性操作，对新手学习CSS有一定的帮助，使用起来也是事半功倍，那么接下来我们就具体的了解看看，都有哪些css属性操作吧。
　　
　　1、自定义文本选择
　　
　　::s

　　本文主要给大家分享一下css中的一些实用属性操作，对新手学习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渐变虚框
　　
　　<style>
　　    .box {
　　        width: 150px;
　　        border: 2px dashed #fff;
　　        background: linear-gradient(to bottom, #34538b, #cd0000);
　　        background-origin: border-box;
　　    }
　　    .content {
　　        height: 100px;
　　        background-color: #fff;
　　    }
　　</style>
　　<div class="box">
　　    <div class="content"></div>
　　</div>

（编辑：拼字网 - 核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

n个结点构造几种树	Python join 办法合并
C++虚函数注意点以及构	运用JavaScript怎么样

聊聊css中的一 些实用属性操作

聊聊css中的一些实用属性操作