CSS/CSS3
关注
分享
扫一扫
记录css相关知识
liuyan1106_
念念不忘，必有回想
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS 实现文字渐变色
给需要渐变的标签增加以下代码：.icon { background-image: -webkit-linear-gradient(left bottom, #fb2c61 , #0700ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}属性说明：background-image: -webkit-linear-gradient(left bottom, #fb2c61 , #fac36.原创 2021-08-19 13:50:35 · 772 阅读 · 0 评论 -
CSS 获取除第一个子元素外的其他子元素
效果预览：一、基础的代码结构<div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div></div><style> .box { display: flex; } .box .box-item原创 2021-07-06 16:33:08 · 488 阅读 · 0 评论 -
CSS 修改滚动条样式
/*修改滚动条样式*/::-webkit-scrollbar { width: 8px; height: 10px;}::-webkit-scrollbar-button { background-color: red;}::-webkit-scrollbar-track-piece { background: yellow;}::-webkit-scrollbar-thumb { background: blue; border-radius: 4px;}原创 2021-07-06 14:04:33 · 125 阅读 · 0 评论 -
纯CSS实现各种三角形
一、上箭头.arrows-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 30px solid #45FFF8;}二、下箭头.arrows-down { width: 0; height: 0; border-left: 20px solid tr.原创 2020-11-30 16:26:27 · 230 阅读 · 0 评论 -
CSS 解决中文乱码
设置css文件的编码格式@charset "utf-8";原创 2020-11-13 17:39:25 · 623 阅读 · 0 评论 -
CSS去除input框自带的叉号
input::-ms-clear{display:none;}原创 2020-11-13 17:05:12 · 2314 阅读 · 0 评论 -
CSS超出变点
一、单行overflow: hidden;text-overflow: ellipsis;white-space: nowrap;二、多行原创 2020-11-13 16:56:59 · 596 阅读 · 0 评论 -
CSS3动画结束后停在最后一帧
animation-fill-mode: forwards;//保留最后一帧的状态一、定义和用法animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。animation-fill-mode : none | forwards | backwards | both;二、属性介绍值描述none不改变默认行为。forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards在 animation-d原创 2020-09-02 13:05:18 · 4267 阅读 · 0 评论 -
link与@import的区别
一、语法1、link语法结构<link href="CSSurl路径" rel="stylesheet" type="text/css" />2、@import语法结构<style>@import + 空格+ url(CSS文件路径地址);</style>二、区别1、语法结构不一样link是属于html 标签，需要在html源代码中使用，@import是css提供的一种引用方式，在css文件中直接引入，在html源码中则需要加上标签才可引用样式；2原创 2020-08-31 16:38:32 · 179 阅读 · 0 评论 -
CSS圆角border-radius
div { border-radius: 25px; <!-- 相等于以下代码： border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; -->}一、属性定义border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合原创 2020-08-30 12:07:35 · 115 阅读 · 0 评论 -
CSS计算函数calc()
div { width: calc(100% - 100px);}一、定义和用法calc() 函数用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 “+”, “-”, “*”, “/” 运算；calc()函数使用标准的数学运算优先级规则；二、举例代码如下：<!DOCTYPE html><html><he原创 2020-08-30 11:42:54 · 881 阅读 · 0 评论 -
CSS强制不换行/自动换行
一、强制不换行p { white-space: nowrap;}二、自动换行p { word-wrap: break-word; word-break: normal;}三、强制英文换行p { word-break:break-all;}原创 2020-08-28 22:55:16 · 446 阅读 · 0 评论 -
CSS文本之间的间距
word-spacing:30px;一、属性定义及使用说明word-spacing属性增加或减少字与字之间的空白。注意： 负值是允许的。二、举例代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>文本之间的间距</title> <style>p{ word-spacing:30px;}</style>原创 2020-08-28 22:41:27 · 1002 阅读 · 0 评论 -
CSS文本排列方向
writing-mode: horizontal-tb; //默认writing-mode: vertical-rl; //文字垂直排列 向左对齐writing-mode: vertical-lr; //文字垂直排列 向右排列一、属性定义及使用说明writing-mode 属性定义了文本在水平或垂直方向上如何排布。语法格式如下：writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr原创 2020-08-28 22:12:30 · 7292 阅读 · 0 评论