css
关注
分享
扫一扫
才华有限
这个作者很懒，什么都没留下…
展开
-
自定义滚动条
::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece 内层轨道，原创 2021-08-18 15:58:18 · 673 阅读 · 0 评论 -
css 实现绘制圆以及一个带圆弧的 需求 实现
// 想要得到一个圆,我们可以通过 border-radius 设置. 矩形的的长宽一样// 圆角半径恰好是 其长度的一半 div{ width:160px; height:160px; background-color: black; border-radius: 80px; }// 半圆->是绘制一个矩形，随意一侧的两个角圆角即可 .div{ width:160px; height:80px;原创 2021-03-17 16:26:40 · 1080 阅读 · 0 评论 -
css 实现 各种三角形 实现思路与案例
绘制思路// 首先我们先绘制一个具有宽高的元素,如下图所示 .div { width: 200px; height: 200px; background-color: red; /*定义border*/ border: 50px solid black; } /*当我们有了border 外边框, MDN里面是这样定义border的,它是一个用于设置各种单独的边界属性的 '简写' 属性。也就是说可以单独设置 top, bottom, ri原创 2021-03-17 16:04:33 · 290 阅读 · 0 评论 -
盒子元素垂直居中的几种方式
垂直居中的四种实现方式使用margin 利用百分比进行垂直居中使用margin:auto 进行居中显示使用css3的transform属性进行垂直居中使用flex 布局进行垂直居中//先设置必要的样式 html 结构<div class="box"> <div class="box1"> 我是要被垂直居中的盒子...原创 2018-08-11 23:01:38 · 2380 阅读 · 0 评论 -
css实例2
--dirname 是css中的声明变量 var(--n)是一个函数指的是读取变量让其动画的时间不一致则可以达到图片的效果.这是仿一个大佬的小案例//html代码 <div class="box"> <span></span> <span></span> <span&原创 2018-08-19 21:39:16 · 298 阅读 · 0 评论 -
css小demo(2) 电池效果
效果: 从思否 模仿的案例...原创 2018-10-12 21:33:23 · 2696 阅读 · 0 评论 -
css小demo(3) 点击按钮切换
效果:静态html:<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http原创 2018-10-12 21:41:53 · 597 阅读 · 0 评论