css
关注
分享
扫一扫
文章平均质量分 52
LinDaiuuj
上善若水,虚怀若谷
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
mix-blend-mode的了解使用
它类似于图形设计软件（如 Photoshop）中的图层混合模式，可以实现各种视觉效果；是 CSS 的一个属性，用于控制元素的内容（如文本、图像、背景等）如何与其。原创 2025-07-18 14:25:23 · 310 阅读 · 0 评论 -
给文字添加好看的阴影-text-shadow
* 水平偏移 2px，垂直偏移 2px，模糊半径 4px，颜色 #000000 */有时候，结合内阴影（text-shadow）和外阴影（box-shadow）可以创造出更复杂的效果。text-shadow: 1px 1px 2px #ff0000, /* 红色阴影 */通过上述方法，可以根据需要调整和组合不同的阴影效果，创造出既美观又吸引人的文本效果。通过使用CSS变量，你可以轻松地调整和重用阴影设置，实现响应式设计。原创 2025-05-20 14:46:43 · 566 阅读 · 0 评论 -
文字均分的css
【代码】文字均分的css。原创 2025-04-24 13:13:34 · 575 阅读 · 0 评论 -
scss基础用法
SCSS（Sassy CSS）是Sass的增强版本，作为CSS的预处理器，它提供了多种功能来提高代码的可维护性和效率。通过掌握这些基础用法，开发者可以更高效地编写和维护CSS代码，充分发挥SCSS作为预处理器的优势。原创 2025-03-28 10:46:03 · 651 阅读 · 0 评论 -
border渐变的写法
【代码】border渐变的写法。原创 2024-11-13 17:49:17 · 117 阅读 · 0 评论 -
p,div等里面支持br换行 对应后台换过来的textarea的富文本内容
这样的属性，这样就可以保留空格和换行，并且文本会在容器的末尾自动换行。标签来强制换行，你可以直接在HTML中使用它，不需要额外的CSS。标签是一个空元素，它的存在表示在HTML中的那个位置需要一个换行。它将会在单词之间自动换行，即便没有标签。类应用到的元素中的文本将会在容器的末尾自动换行，即便没有使用。属性来控制文本的换行行为。如何使用CSS来支持或者允许。标签在HTML中创建换行。原创 2024-09-26 17:24:49 · 382 阅读 · 0 评论 -
两行css 实现瀑布流
【代码】两行css 实现瀑布流。原创 2024-06-17 17:49:04 · 414 阅读 · 0 评论 -
Less的简单总结
名称：Less（通常表示为 LESS 或 less.js）类型：CSS 预处理器创始人：Alexis Sellier首次发布：2009年许可证：Apache License 2.0对于Less没有内置的功能，开发者可以编写自定义函数，通过JavaScript扩展Less的能力。这为解决特定问题或实现高度定制化的样式逻辑提供了无限可能。// 自定义JavaScript函数// 实现函数逻辑// Less中使用自定义函数.example {原创 2024-06-04 15:01:20 · 558 阅读 · 0 评论 -
Sass的简单总结
Placeholder选择器：% 在 SASS 中，可以使用 % 符号来定义占位符选择器，不会被编译为实际的 CSS 选择器，例如： %button-style { background-color: blue;循环语句：@for、@each、@while 在 SASS 中，可以使用循环语句来简化样式规则的书写，例如： @for i from 1 through 5 { .item-#{i} { opacity: $i * 0.2;通过合理使用占位符选择器，可以减少生成的样式大小，提高性能。原创 2024-06-04 14:13:58 · 657 阅读 · 0 评论 -
margin-top属性
原创 2024-05-24 15:47:11 · 403 阅读 · 0 评论 -
视口 css
视口是浏览器上显示网页的一块区域，大小并不局限于浏览器可视区域范围。PC端和移动端视口差别很大。PC端中视口宽度始终与浏览器窗口宽度一致，移动端视口与浏览器窗口宽度完全独立。原创 2023-10-17 17:54:46 · 450 阅读 · 0 评论 -
text-underline的位置设置！！
【代码】text-underline的位置设置！！原创 2023-05-08 15:09:51 · 776 阅读 · 0 评论 -
大学生有关css的大作业
1.网页中的主要元素都有哪些？网页的基本元素有：1、文本元素，包括标题、文字、段落、样式；2、图像，包括图像标题、背景、网页主图；3、超链接，包括站内链接、外部链接；4、导航栏；5、动画；6、表格；7、框架；8、表单。2.CSS技术在网页设计中主要有哪些应用3.CSS的选择器类型都有哪些⑴标签选择器（元素选择器）⑵ID选择器（唯一性，一次引用）⑶类选择器（单类选择器，多类选择器）⑷属性选择器（简单属性选择，具体属性选择，部分属性选择， 特定属性选择）⑸派生选择器（后代选择原创 2021-11-30 19:26:12 · 283 阅读 · 0 评论 -
字体设置html
简体中文页面的个人觉得最佳设置为：html lang=zh-CNcharset=utf-8font-family: arial, sans-serif;Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP SP3 宋体-PUA)Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、原创 2021-11-24 14:11:41 · 435 阅读 · 1 评论 -
css 和 html 的基础升级
1. 一句话概括：html ，xhtml 和 html5；html指的是html4.01，xhtml是html的过渡版，html5是html的升级版；2.div和spandiv和span没有任何语义3.id和classid具有唯一性，一般在logo，导航，主体内容，底部信息栏等结构；对于关键结构建议加上id，以便于搜索引擎识别页面的结构；其他小地方都建议用class；4.语义化标签搜索引擎会根据html的标签来识别页面，必须有对应的语义化标签（img，p，table等），否则都不原创 2021-11-18 17:45:52 · 402 阅读 · 1 评论 -
css得一些注意点
1.*行元素不支持上下padding和margin（很重要！！！）2.*父子级margin的怪异现象：子级得margin-top不生效,因父级没边框,子级往下移{最好就是给父级使用内边距padding 来 替换这种写法} 解决方案: 1.给父级添加边框 2.给父级overflow:hidden;(经常使用) ...原创 2021-09-02 14:49:04 · 252 阅读 · 0 评论 -
css样式比较好点的
1.box-shadow:0 2px 15px 0rgba(0,0,0,.15);2.font-family:Constantia,Georgia;3.原创 2021-09-02 14:39:26 · 124 阅读 · 0 评论 -
css制作多边形的方法111111
css3完成多边形1、正方形最终效果：CSS代码如下：#square {width: 100px;height: 100px;background: red;}2、长方形最终效果：CSS代码如下：#rectangle {width: 200px;height: 100px;background: red;}3、圆形最终效果：CSS代码如下：#circle {width: 10...转载 2021-06-08 13:41:00 · 3431 阅读 · 0 评论 -
‘font-weight’属性
字体粗细：‘font-weight’属性名称： font-weight取值： normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900初始： normal适用于： 所有元素继承： 是百分比： （不适用）媒介： 视觉计算值： 详见描述动画： -‘font-weight’属性执行字体中字形的重量，这取决于黑度等级或笔划粗细。其值的意义如下：100至900...原创 2021-04-09 15:10:23 · 7702 阅读 · 0 评论 -
防页面抖动html
两行css代码搞定：html, body {height:100%;overflow:auto;margin: 0;}html{overflow-y:scroll;}原创 2021-02-23 10:05:43 · 284 阅读 · 0 评论 -
img在div中垂直居中的方法
html中<div> <img src="" /></div>方法：1.将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。<style type="text/css">*{margin: 0;padding: 0;}div{width:150px;height: 100px;display: table-cell;ve原创 2020-10-26 17:26:35 · 8248 阅读 · 0 评论 -
渐变！！！兼容各个网站；
header>p{position: relative;width:100%;height:300px;bottom:240px;filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='rgba(241,242,243,0)',endColorStr='rgba(241,242,243,1)',gradientType='0');background-image: linear-gradient(0deg, rgba(2.原创 2020-10-23 15:14:22 · 106 阅读 · 0 评论 -
项目中好用得css样式
效果一：html：<a href="#">沙盒<i class="triangle"></i><i class="plus"></i></a>css：a{position：relative；display:block;text-align:center;line-height:60px;} .triangle{display:block;width:0;height:0;border-right:15p...原创 2020-06-03 15:55:06 · 262 阅读 · 0 评论 -
斜杠css背景图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .stripes { ...原创 2020-03-04 10:17:52 · 864 阅读 · 0 评论 -
一大串字母数字默认不换行，设置css让换行
设置字母自动换行css：word-wrap:break-word；强制换行 兼容性较好；原创 2019-12-11 10:00:08 · 274 阅读 · 0 评论 -
小程序引入iconfont字体
第一步 下载自己喜欢的图标我用的是阿里巴巴矢量图库，在Iconfont找到自己喜欢的图标，加入购物车，如图：加入购物车添加至项目，如图：image.png下载至本地，如图：image.png解压,如图：image.png第二步 转换ttf因为小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base6...转载 2019-08-06 12:05:33 · 283 阅读 · 0 评论 -
不被选中
现象：html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。原因：鼠标点快了文字会被选中。解决方案：不同的浏览器设置的内容不一样，user-select不是一个W3C的标准，浏览器的支持不完成，需要对不同的浏览器进行调整。body{-moz-user-select:none;/*火狐*/...转载 2019-08-01 19:06:51 · 211 阅读 · 0 评论 -
移动端小于1px边框
.border-top{position: relative;border-top: none !important;}.border-top:after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-co...转载 2019-06-28 17:15:05 · 288 阅读 · 0 评论 -
多行文字居中
多行文字的垂直居中解决方案：vertical-align方法.box{ border:1px solid #f00; background-color:#eee; width:500px; height:100px;vertical-align:middle;display:table-cell;}效果图：说明：可以看到，这种方法能够使得单行文字、多行文字都居中。但是因为 ...原创 2019-06-28 15:00:06 · 601 阅读 · 1 评论 -
dislplay:inline-block;
转自：http://www.cnblogs.com/Ry-yuan/p/6848197.htmlcss之display:inline-block布局1.解释一下display的几个常用的属性值，inline ， block， inline-blockinline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元...转载 2019-06-06 11:17:15 · 2228 阅读 · 1 评论 -
动态旋转放大css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width:120px;...原创 2019-06-05 19:48:29 · 241 阅读 · 0 评论