CSS常用代码片段-01

【01】文字颜色渐变

background:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

【02】文字模糊

text-shadow:0 0 10px red,0 0 10px yellow; // x轴距离、y轴距离、模糊距离、阴影颜色

【03】背景颜色渐变

如下两段代码任选其一。

background: repeating-linear-gradient(to left, #ff0, #0f0);

background: -webkit-linear-gradient(left, #1494f5, #28f7ff);
background: -ms-linear-gradient(left, #1494f5, #28f7ff);
background: -moz-linear-gradient(left, #1494f5, #28f7ff);
background: -o-linear-gradient(left, #1494f5, #28f7ff);

【04】图形裁剪

clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);

【05】文字倒影

利用box-reflect实现文字倒影。

-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, .3));

【06】文本输入框

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.search {width: 258px;height:35px;position:absolute;top:31px;left:64px;}input {width:484px;outline:none;border:none;background:transparent;margin:4px 0 0 6px;color:#000;font-size:18px;font-family:"SourceHanSansCN-Regular";}</style></head><body><div class="search"><input placeholder="关键字查询"></input></div></body>
</html>

【07】高斯模糊

.wrapper {width: 500px;height: 500px;backdrop-filter: blur(10px);background: rgba(122, 118, 142, 0.54);
}

【08】文本溢出

如下代码所示，实现单行文本溢出显示省略号。

.box {white-space:nowrap; // 必须强制一行显示overflow:hidden; // 超出部分隐藏text-overflow:ellipsis; // 文字省略号代替超出的文本
}

如下代码所示，实现多行文本超出，末行显示省略号。

.box {width: 200px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
}

【09】文本垂直排列

如下代码所示，实现文字垂直排列。

writing-mode: vertical-lr;

【10】滚动条

::-webkit-scrollbar {/*滚动条整体样式*/width: 5px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 10px;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #56deff;
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 10px;background: #ededed;
}

【11】中英文换行

固定宽度的块状元素中，内容换行如下所示。

1、填充的内容全部为纯英文或者纯数字时，在ie或者火狐中不会换行，且会撑大容器
2、当数字或英文中带有汉字时，会从汉字处换行
3、纯汉字可以自动换行。

word-wrap和word-break配合使用可以有效解决换行问题。

.box {word-wrap:break-word;word-break:break-all;
}

word-wrap有两种取值：
1）normal
2）break-word: 强制换行（内容将在边界内换行，中文没有任何问题，英文语句也没有问题，但对于长串的英文就不起作用）

word-break用来控制断词，有三种取值：
1）normal
2）break-all: 断开单词（在单词到边界时，下个字母自动到下一行，主要解决了长串英文的问题）
3）keep-all: 是指Chinese, Japanese, and Korean不断词，一句话一行，可以用来排列古诗哟

【12】利用背景实现分割线效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>html,body{background-color: #000;}.box {width: 100%;height: 20px;background: linear-gradient(to right, rgba(255,255,255), rgba(255,255,255)) no-repeat,linear-gradient(to right, rgba(255,255,255, 0.6), rgba(255,255,255, 0.6)) no-repeat,linear-gradient(to right, rgba(255,255,255), rgba(255,255,255)) no-repeat;background-size: 8px 2px, 1130px 1px, 8px 2px;background-position: 0px 100%, 0px 100%, 1123px 100%;}</style></head><body><div class="box"></div></body>
</html>

【13】设置滚动条平滑滚动效果

// 通过代码触发滚动时，滚动条移动是否平滑
.scroll-smooth {scroll-behavior: smooth;
}

CSS常用代码片段-01相关推荐

HTML+CSS常用代码
HTML+CSS常用代码(笔记) 注释标签:对代码进行说明  常用格式标签 <b>加粗</b> <i> ...
前端常用代码片段(四)
前端常用代码片段(一) 点这里前端常用代码片段(二) 点这里前端常用代码片段(三) 点这里前端常用代码片段(四) 点这里前端常用代码片段(五) 点这里前端常用代码片段(六) 点这里 1.简述 ...
css常用代码大全,html+css代码
css常用代码大全,html+css代码 html+css可以很方便的进行网页的排版布局,还能减少很多不必要的代码. 一.文本设置 1.font-size: 字号参数 2.font-style: 字 ...
Jquery学习总结（1）——Jquery常用代码片段汇总
1. 禁止右键点击 ? 1 2 3 4 5 $(document).ready(function(){ $(document).bind("contextmenu",fun ...
iOS开发常用代码片段：总有你用得上的功能
使用方法:查看文章目录,查找需要的功能. 代码片段目录 1.禁止手机睡眠 2. 隐藏某行cell 3.禁用button高亮 4..切换window的根控制器 5.去除数组中重复的对象 6.给一个vie ...
html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
分享前端开发常用代码片段
分享开发中常用的一些代码片段,我们的目标是早下班.不加班,哈哈~~ 1.手机号隐藏中间4位 //手机号脱敏 function mobile(data) {return data.replace(/( ...
js统计html页面访问的次数6,JS综合篇--[总结]Web前端常用代码片段整理
IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. 条件注释只能用于IE5以上,IE1 ...
网页制作基础学习——HTML+CSS常用代码
Hello大家好,我是北辰!很高心您能来阅读! HTML HTML超文本语言(Hyget Text Language) 1993 HTML1.0 2013 HTML5.0 HTML5的优势: 1.化繁 ...

CSS常用代码片段-01

【01】文字颜色渐变

【02】文字模糊

【03】背景颜色渐变

【04】图形裁剪

【05】文字倒影

【06】文本输入框

【07】高斯模糊

【08】文本溢出

【09】文本垂直排列

【10】滚动条

【11】中英文换行

【12】利用背景实现分割线效果

【13】设置滚动条平滑滚动效果

CSS常用代码片段-01相关推荐

最新文章

热门文章