举例: CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。 @keyfra            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-01-05 14:07:48
                            
                                171阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            自定义滚动条实现
此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下:
滚动条组成部分
1. ::-webkit-scrollbar 滚动条整体部分
2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)
3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
4. ::-we            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-08-13 20:01:52
                            
                                452阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            我们在浏览国外的一些个人网站时,总是可以发现一些非常个性的字体,比如 但是因为在电脑上安装的字体有限,所以很多时候我们都找不到自己想要的字体,这时候我们就需要使用css3提供的@font-face来实现个性化字体了。  但是说@font-face是css3中的新特性是不准确的,因为在css2中就已经支持了这一特性,ie浏览器当时也已经支持它了,只是其他浏览器还不支持。而目前,各大浏览器都            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2017-05-03 11:17:56
                            
                                358阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            CSS3自定义字体写法 ps:最好英文 中文字体太大 影响加载速度 (中文字体网上的ttf大多数是gb2312 不过页面UTF-8格式可以用 不会乱码 <meta charset="UTF-8"> 会自动转化为utf-8)<pre><!DOCTYPE html><html> <head> <meta            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-11-12 15:27:00
                            
                                127阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外,CSS3 还有一种自由度更大的自定义动画,开发者            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-05-07 14:48:13
                            
                                209阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) ::            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-05-13 11:41:05
                            
                                473阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            前言
webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。
演示
来看看这2个滚动条demo: demo1(图片版)、demo2(纯CSS3版)
滚动条组成
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-12-06 15:02:00
                            
                                97阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的CSS滚动条选择器你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:::-webkit-scrollbar— 整个滚动条.	::-webkit-scrollbar-button— 滚动条上的按钮 (上下箭头).	::-webkit-scrollbar-thumb— 滚动条上的滚动滑块.	::-webk...            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-05-10 10:08:48
                            
                                272阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            移动端隐藏scroll滚动条::-webkit-scrollbar ::-webkit-scrollbar {/*隐藏滚轮*/ display: none;} CS            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-10-04 22:16:00
                            
                                2422阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            CSS3 自定义滚动条样式 -webkit-scrollbar
介绍
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,今天给大家带来的是如何在 webkit 内核的浏览器中自定义滚动条。
webkit 支持拥有 overflow 属性的区域、列表框、下拉菜单以及 textarea 文本框等滚动条自定义样式,所以用处还是挺大的。
当然,兼容所有浏览器的滚动条样式            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2024-07-26 15:57:48
                            
                                55阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            * { font-size: 16px!important; line-height: 1.6!important; } /*设置顶部的样式*/ #header { display: none; height: 100px!important; /*margin-top: -15px!importa            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-02-10 21:47:00
                            
                                383阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            进阶使用CSS自定义属性在之前一篇介绍CSS自定义属性的文章中,我们介绍了什么是CSS自定义属性,var()、calc()。本篇文章中,为了进一步使用它,我们将介绍CSS自定义属性的其他用法。自定义原则在传统的CSS中,通常我们需要写重复的属性值,而自定义原则能让我们避免这种情况。做到“一处定义,处处使用”。:root {
	--theme-color: gray;
}
.button {
	ba            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-10-29 14:23:19
                            
                                119阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            1.利用css3属性 appearance。 该属性(强制)更改(改变)默认(原生)样式。 Firefox 支持替代的 -moz-appearance 属性;Safari 和 Chrome 支持替代的 -webkit-appearance 属性;IE不支持该属性。 所以可以利用该属性取消checkb            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2020-10-14 17:51:00
                            
                                989阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            CSS3自定义图标悬浮菜单是一款基于HTML5+CSS3实现的可自定义小图标悬浮菜单。查看原文查看在线演示Demo和更多原文内容教程:http://ibloger.net/article/1200.html            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-02-23 11:42:10
                            
                                845阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            css3自定义移动端滚动条<pre>/*定义滚动条宽 高度是根据内容设置的高度决定的*/::-webkit-scrollbar{ width: 5px;} /*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-11-14 13:01:00
                            
                                236阅读
                            
                                                                                    
                                2评论