
前端原生: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 · 173 阅读 · 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 · 1987 阅读 · 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 · 2645 阅读 · 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 评论