华安 - 博客园

CSS实现扇形圆形的一种思路

摘要：第一步 CSS画圆思路：先实现正方形，通过设置四个圆角来实现圆形，圆角大小为正方形边长的1/2 1 <div class="circle"></div> 2 <style> 3 .circle { 4 width: 200px; 5 height: 200px; 6 border-radius: 阅读全文

posted @ 2025-07-24 09:50 华安阅读(39) 评论(0) 推荐(0)

用css3实现饼图

摘要： 1、利用背景的锥形渐变（conic-gradient），此方法可以实现饼图： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>利用圆锥渐变属性绘制扇形</title> 6 <style> 7 #grad1 { 阅读全文

posted @ 2025-07-23 17:03 华安阅读(33) 评论(0) 推荐(0)

css3实现3D旋转木马案例

摘要： 1 <!DOCTYPE html> 2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-16LE"> 3 <style type="text/css"> 4 :root { 5 6 } 7 bod 阅读全文

posted @ 2025-07-21 14:18 华安阅读(32) 评论(0) 推荐(0)

css中自定义变量妙用一例

摘要：利用CSS中自定义的变量 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 #div1 7 { 8 position: relative; 9 height: 200px; 10 width: 200px 阅读全文

posted @ 2025-07-18 09:32 华安阅读(12) 评论(0) 推荐(0)

css中transform-origin的理解

摘要：定义和用法 transform-origin 属性允许您改变被转换元素的位置。这个官方的定义看着让我头晕，实在是不好理解。 1 transform-origin: x-axis y-axis z-axis; 默认值为：50% 50% 0 x-axis的值可为left、center、right、le 阅读全文

posted @ 2025-07-18 09:13 华安阅读(80) 评论(0) 推荐(0)

css去掉input获取焦点或者激活时的默认边框

摘要： .textCheckCode:focus, .textCheckCode:active{ outline: none; } 主要时文本框的 outline在起作用。阅读全文

posted @ 2025-07-17 14:00 华安阅读(38) 评论(0) 推荐(0)

windows下更新 nginx中的https证书注意

摘要： 1.重要的话说三遍，用新的 https证书替换掉旧的证书之后，一定要干一件大事，重启服务器，才会生效。今天被这个问题都搞的怀疑人生了。执行了 nginx -s reload 很多遍都没效果，在浏览器端还是旧的https证书。重启服务器就OK了。阅读全文

posted @ 2025-07-17 10:21 华安阅读(26) 评论(0) 推荐(0)

css滤镜属性

摘要：官方解释： https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter#%E8%AF%AD%E6%B3%95 https://www.exception.site/article/1939 使用总结： 1.body元素中使用 1 body{ 2 b 阅读全文

posted @ 2025-07-16 11:36 华安阅读(8) 评论(0) 推荐(0)

html5进度条标签

摘要： 1.、progess标签通过 progress 标签可以直接生成进度条效果： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <label for 阅读全文

posted @ 2025-07-15 17:33 华安阅读(42) 评论(0) 推荐(0)

css中margin一种边距的折叠(Collapsing Margins)

摘要：当两个垂直相邻的块级元素的边距相遇时，它们会折叠成一个边距，其大小为两者中较大的那个。这是CSS的一个特性，旨在避免不必要的空白。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.co 阅读全文

posted @ 2025-07-15 17:09 华安阅读(8) 评论(0) 推荐(0)

huaan011