网页默认的滚动条不怎么好看，特别是对于网页内部元素使用滚动条时，默认样式就更加显得格格不入。对于滚动条的样式设置，调整以下一个属性的值即可。::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的::-webkit-scrollbar-button 滚动条两端的按钮::-webkit-scrollbar-track 外层轨道::-webkit …
css border-radius
盒子模型??盒子模型是我们在CSS网页布局中必不可少的东西。网页中的盒子模型用来存放网页中的各个元素，每一个可见的HTML元素都是一个盒子，这些盒子通过嵌套、叠加或者排列等方式组织在一起，形成我们所看见的页面。??一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margi …
在本文中，我们将深入了解滚动条的世界。我知道，这听起来不太迷人，但相信我，精心设计的页面与匹配的滚动条齐头并进。老式的镀铬滚动条只是不适合那么多。我们将研究滚动条的细节，然后看看一些很酷的例子。滚动条的组成部分要设置滚动条的样式，您需要熟悉滚动条的解剖结构。请看这张图：这里要记住的两个主要组成部分是：scrollbar track是滚动条下方的背景。scro …
hi，朋友，您来啦。带上小板凳，我们一起聊一聊今天的话题。首先，使用过Windows 11的朋友，可能使用过窗口布局功能。那么，如何通过Grid布局实现此功能呢？网格布局容器采用网格布局的区域，一般称为“容器”。在容器内部通过网格定位的子元素，一般称为“项目”。display: grid | inline-grid;HTML<div class= …
边框CSS中用border 定义边框属性。border语法：border:[宽度][样式][颜色]其中：宽度：边框的宽度，单位可以使px、em、rem 等单位，也可以使用thin、medium、thick 三种预设值样式：边框的样式，值可以是 solid(实线),dashed(虚线),dotted(点线)等多种样式。样式值意思solid实线dashed虚线d …
前言在传统的网页布局中，我们的页面元素都是或矩形、或圆形的，如果我们能够这种打破传统的矩形布局，那么在提升用户体验的同时还能造成一定的视觉冲击力CSS 的clip-path属性，就能将这一设想变为现实，它宛如设计师手中的魔法剪刀，可以让你轻松裁剪元素，创造出各种不规则和富有创意的形状；从简单的圆形按钮到复杂的多边形设计，clip-path为开发者提供了丰富的 …
前言之前一直在玩 three.js ，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在 CSS 中也用上这些数学函数，但发现 CSS 目前还没有，据说以后的新规范会纳入，估计也要等很久。然而，我们可以通过一些小技巧，来创作出一些属于自己的 CSS 数学函数，从而实现一些有趣的动画效果。让我们开始吧！CSS 数学函数注意：以下的函数用原生 CSS …
笔者 | 大澈大家好，我是大澈！就在昨天，在家里跑步运动，被楼下人找了上来，说是我整的动静太大，影响到了他们。虽然事情是我的问题，但还是整的我十分郁闷，毕竟敲代码一天，晚上想在家稍微活动活动，都搞不成了。说实话程序员太难了，毕竟下班后真的没有时间来做点别的事。不知道大家在下班后这短暂的时间里，是怎样运动的。言归正传，一起来看一下，大澈今日分享的问题。ONE需 …
CSS3为web设计增添了许多令人惊叹的特性，这其中你经常会用到box-shadow（图层阴影），border-radius（边框圆角），transform（变形）这一类受欢迎的常用特性。但是还有一些强大的功能，你可能没有接触到，它们就象是埋藏在地下的宝藏，静静等待着你的发掘。W3C正不断致力于为设计师、开发人员和用户开发新的CSS特性，下面我们就来看看你可 …
使用css的border边框属性和宽度高度可以实现各种形状的图形，如下：梯形html:<div class="trapezoid"><div>css:*梯形*.trapezoid {width: 80px; height: 0;border: 40px solid #fff;border-top: 0 solid;bo …