分类: CSS | Damao

乐躬耕于陇亩兮，吾爱吾庐。聊寄傲于琴书兮，以待天时。

文章分类

React 4 总结 2 JavaScript 27 cloudflare 1 GO 3 Github 2 版本控制工具 6 Hexo 3 HTML API 2 项目规范 3 Linux 6 Kodi 1 MAC 1 图床 1 TypeScript 3 小程序 2 Vue 17 Windows 5 小技巧 3 CSS 7 Docker 1 Java 1 SVG 1 Taro 1 文摘 1 网址 1 正则 1 碎碎念 2 阅读记录 2 调试工具 1 窄门大道 1 移动端 1 HTML 2 浏览器 1 CSP 1 Canvas 1

                            
                            一个新的css属性：field-sizing
                        
                                field-sizing 控制表单尺寸自适应的CSS
语法
fixed，输入框、文本区域和下拉选择，无论内容如何，​​它们宽高都是固定
content，输入框、文本区域和下拉选择元素的宽高会根据内容的大小而变化

需要 Chrome 12
                            
                                2024-09-20
                            
                                    CSS
                                
                            CSS
                        
                            css自定义有序列表
                        
                                CSS 属性 list-style-type
list-style-type可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）, 默认为disc实心圆点
参考MDN

常见属性
none 不显示<ul style
                            
                                2023-09-13
                            
                                    CSS
                                
                            CSS
                        
                            用css实现防止按钮重复点击
                        
                                原理
利用pointer-events属性设置元素是否对鼠标事件做出反应

实现代码
可以延申加入自定义动画<button class="save-button" onclick="console.log('保存')">保存</
                            
                                2023-02-18
                            
                                    CSS
                                
                            CSS
                        
                            css碎片记忆
                        
滚动条不占位 overlay属性
html {
  overflow-y: overlay;
}
在CSS中将颜色定义为变量
:root {
  --main-color:#06c;
}

#foo
                            
                                2022-12-07
                            
                                    CSS
                                
                            CSS
                        
                            一个有趣的css背景效果
                        
                                一个背景镂空虚化的背景效果
演示代码    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equi
                            
                                2022-10-13
                            
                                    CSS
                                
                            CSS
                        
                            css实现打字效果
                        
                                css实现打字效果<!-- 中文 -->
<style type="text/css">
  .typing-cn {
    width: 15.1em;
    white-space: nowrap;
    b
                            
                                2022-06-09
                            
                                    CSS
                                
                            CSS
                        
                            HTML
                        
                            css画梯形
                        
                                使用html+css画出梯形<style type="text/css">
    .box {
        position: relative;
        margin: 50px;
        heigh
                            
                                2021-11-10
                            
                                    CSS
                                
                            CSS
                        
                            HTML