前端原生：css
关注
分享
扫一扫
美化页面的代码原生css是每位大钱端的开发人员必备的底层技术
超级码吏
苟有恒，何必三更眠五更起；最无益，莫过一日曝十日寒
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
纯css实现蜂窝效果
主要就是clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); 实现六边形。animation实现循环滚动原创 2025-05-14 13:51:30 · 921 阅读 · 0 评论 -
grid layout 优雅的css布局
你可能想不到，只用「两行 CSS」，就能让你的卡片、图片、内容块「自动适应」各种屏幕宽度，彻底摆脱复杂的媒体查询！ 秘诀就是 CSS Grid 的 auto-fill 和 auto-fit。原创 2025-05-06 16:28:23 · 172 阅读 · 0 评论 -
纯css实现div宽度可调整
* 必须设置 overflow 为 auto 或 visible 才能调整大小 *//* 可选：添加背景色以便观察效果 *//* 允许水平调整大小 */原创 2025-01-23 13:58:10 · 677 阅读 · 0 评论 -
纯css实现卡片边角丝带效果
这段代码是一个 HTML 页面，它包含了 CSS 样式，用于创建一个具有动态效果的边角丝带卡片，当鼠标悬停在卡片上时，卡片会缩小。转载 2025-01-22 09:13:53 · 105 阅读 · 0 评论 -
纯css 实现表单的label自动占位 Material风格
Material UI风格的输入框原创 2024-08-11 09:33:04 · 446 阅读 · 0 评论 -
实现环形进度圈
/x坐标,y坐标,半径,起始角,结束角,顺时针/逆时针。原创 2023-12-05 09:34:12 · 550 阅读 · 0 评论 -
css 毛玻璃： backdrop-filter
backdrop-filter: blur(5px);原创 2021-04-22 13:01:59 · 393 阅读 · 0 评论 -
js操作css变量（属性）
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> :root { --bg: white; }.原创 2020-08-20 16:44:02 · 1007 阅读 · 0 评论 -
css选择前几个元素或者后几个元素
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #nth-test div:nth-child(-n + 4).原创 2020-08-18 11:42:40 · 14085 阅读 · 0 评论 -
原生CSS滚动效果
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS滚动</title> <style type="text/css"> a { display: inline-b.原创 2020-06-13 10:08:29 · 3302 阅读 · 0 评论 -
css 钟表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css钟表</title> <style> body { background-color: bisque; } .cl...原创 2020-05-03 20:56:37 · 486 阅读 · 0 评论 -
html技术： 用svg标签画图
如同canvas一样，svg标签是个画布(容器)，用来放图<!-- 必须初始化宽高，要不然看不见了 --><svg width="600px" height="400px" style="border: 1px solid red;margin: 100px"> <!-- 放画的图 --></svg>输出直线：效果：输出...原创 2020-04-03 19:18:42 · 1052 阅读 · 0 评论 -
css 定义横屏样式或竖屏样式
/* 竖屏 */@media screen and (orientation: portrait) { // some css code}/* 横屏 */@media screen and (orientation: landscape) { // some css code}原创 2020-04-03 14:39:46 · 2660 阅读 · 0 评论 -
css原生输入框验证，:valid和:invalid
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> input{ display: block; padding: 0 20px;...原创 2020-03-19 10:30:03 · 3056 阅读 · 0 评论 -
css 输入框的光标颜色
使用 :placeholder-shown 伪类： :placeholder-shown { color: red; }使用caret-color属性：原创 2020-02-12 15:39:17 · 347 阅读 · 0 评论 -
css 使png格式的图片沿边投影
filter: drop-shadow(X轴距离 Y轴距离 羽化距离 颜色);就能使 .png 格式的图片描边投影了原创 2020-02-12 15:15:35 · 2684 阅读 · 0 评论 -
css grid网格布局
display: grid;搭配以下属性，实现完美布局：1. grid-template-columnsgrid-template-columns: auto auto auto;2. grid-template-rows原创 2020-02-01 19:20:49 · 579 阅读 · 0 评论 -
css 声明变量和调用变量
语法：声明变量放在 :root{}里以 -- 开头定义变量名用var()调用变量值示例图：效果图：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head&...原创 2020-02-01 17:38:05 · 704 阅读 · 0 评论 -
css 可以计算的属性值：calc()函数
示例： .div{ width: 16.666666667%; }就可以写成：.div{ width: calc(100% / 6);}calc() 函数使我们可以在属性值中执行 + - * / 等数学计算操作。1. 语法：cald（有三个参数）除数运算符被除数三个参数间一定要空一格！2. 特性计算嵌套例如：可以简写成：实例...原创 2020-01-22 17:43:27 · 1413 阅读 · 0 评论 -
css transform属性详解
transform的值：rotate() 旋转transform:rotate(30deg):translate() 位移transform:translate(100px,20px):scale() 缩放transform:scale(2,1.5):skew() 扭曲transform:skew(30deg,10deg):...原创 2020-01-20 17:41:44 · 899 阅读 · 0 评论 -
CSS flex弹性布局
display: flex;搭配以下属性和值：flex-direction：属性决定主轴的方向值：row：主轴水平方向，起点在start。 （默认值）row-reverse：主轴水平方向，起点在end。column：主轴为垂直方向，起点在start。column-reverse：主轴为垂直方向，起点在end。flex-wrap：一条轴线排不下如何换行值：...原创 2020-01-14 13:25:41 · 270 阅读 · 0 评论 -
css 类似优惠券邮票那样的内抠圆角样式，内凹圆角处理
如图这样：实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js</title> <style> body{ background-color: red; } .ba...原创 2019-12-05 15:42:05 · 1986 阅读 · 2 评论 -
纯css 鼠标经过时的高级效果，丝滑的感觉：伪类的使用
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <style> body { margin: 0; padding: 0; } button{ ...原创 2019-11-09 13:59:11 · 672 阅读 · 0 评论 -
css 鼠标穿透事件：pointer-events
发现个有意思的css属性：pointer-events语法：pointer-events: none 或者 auto;示例：<!DOCTYPE html><html><head> <title>示例</title> <style> a[href="http://example.com"] { ...原创 2019-10-31 13:37:54 · 4147 阅读 · 0 评论 -
css 调用外部字体、自定义字体
效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...原创 2019-10-29 10:43:03 · 1903 阅读 · 0 评论 -
css 选择器 :first-of-type和 :first-child的区别
:first-child是指第一个孩子原创 2019-10-18 16:18:56 · 256 阅读 · 0 评论 -
css 使元素水平居中
给父元素添加： display: flex; justify-content: center;原创 2019-10-16 15:06:34 · 220 阅读 · 0 评论 -
css 元素溢出部分内框显示渐变
html：<div class="overflow"> <div class="text-scroll"> Content to be scrolled Content to be scrolled Content to be scrolled Content to be scrolled Conten...原创 2019-10-13 10:50:33 · 1296 阅读 · 0 评论 -
css 鼠标跟踪动画
html：<button class="mouse-tracking"> <span>Hover me</span> </button>css：.mouse-tracking { position: relative; background: #7983ff; padding: 0.5rem ...原创 2019-10-13 10:34:38 · 1523 阅读 · 2 评论 -
css 文本排版方向，古文式排版等
语法：writing-mode: horizontal-tb 或者 vertical-rl 或者 vertical-lr 或者 sideways-rl 或者 sideways-lr;解释：horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottomvertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-...原创 2019-10-12 10:02:15 · 1023 阅读 · 0 评论 -
css 文本两端对齐,文字分散排列
width: 400px; text-align-last: justify;原创 2019-10-12 09:55:22 · 1194 阅读 · 0 评论 -
css 文本垂直居中
vertical-align: middle;搭配display: table-cell;使用，给父元素添加，然后相关子元素就垂直居中了效果：原创 2019-08-21 10:01:50 · 13701 阅读 · 0 评论 -
CSS样式各浏览器兼容前缀
前缀浏览器-moz-火狐等使用Mozilla浏览器引擎的浏览器-webkit-Safari, 谷歌浏览器等使用Webkit引擎的浏览器-o-Opera浏览器(早期)原创 2019-09-11 16:20:07 · 1411 阅读 · 0 评论 -
css文本超出换行
先是这样的：添加：**word-wrap: break-word**后兼容性：原创 2019-09-18 15:48:39 · 17614 阅读 · 0 评论 -
CSS 图片处理：变亮变暗、模糊、色相旋转、反转图像、对比度、透明度、饱和度、对比度、将图像转换为深褐色、灰度图像
属性：filter属性值：语法：filter：brightness(17%)；/* 图片变暗17% 。*/例如： img{ filter: blur(10px); /* 模糊 */ }转载 2019-09-26 12:38:30 · 2644 阅读 · 1 评论 -
css 使背景图片显示指定位置（背景图片居中显示）
属性：background-position语法：background-position: center center; /* 第一个值是纵轴，第二个值是横轴 */属性值：top 、left、right、bottom例如：原创 2019-09-26 15:08:16 · 4820 阅读 · 0 评论 -
CSS 中的vh、vw单位
vw： 视窗宽度的百分比（1vw 代表视窗的宽度为 1%）vh： 视窗高度的百分比（ 1vh 代表视窗的高度为 1%）vmin：当前 vw 和 vh 中较小的一个值vmax：当前 vw 和 vh 中较大的一个值vw、vh与 % 的区别：% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body高...原创 2019-09-30 09:39:46 · 22281 阅读 · 0 评论 -
css 改变滚动条的默认样式
/*滚动条整体样式*/body::-webkit-scrollbar { width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}/*滚动条里面的滚动的块样式*/body::-webkit-scrollbar-thumb { border-radius: 10px; background-color: skyblue; backg...原创 2019-10-10 16:32:30 · 639 阅读 · 0 评论 -
css 原生@media响应式、自适应写法
/* 小屏幕（平板，大于等于 768px） */@media screen and (min-width: 768px) { /* 你的样式 */}/* 中等屏幕（桌面显示器，大于等于 992px） */@media screen and (min-width: 992px) { /* 你的样式 */}/* 大屏幕（大桌面显示器，大于等于 1200px） */@media...原创 2019-10-11 16:22:02 · 1180 阅读 · 0 评论 -
css 选中页面文本改变背景色和字颜色
body ::selection{ background-color: red; color: white;}原创 2019-10-11 16:51:02 · 702 阅读 · 0 评论