![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 57
G018_star sky♬
ᐕ)⁾⁾
展开
-
CSS实现炫彩文字和滚动变色动画
<!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>Multi-colo原创 2022-05-01 19:20:23 · 840 阅读 · 0 评论 -
CSS之一直在爬坡的盒子
HTML:<div id="loader"> <div id="box"></div> <div id="hill"></div></div>CSS:html,body { background-color: #404456;}#loader { position: absolute; top: 50%; left: 50%; margin-top: -2.7em; margin-lef原创 2022-04-27 16:23:04 · 258 阅读 · 0 评论 -
CSS-filter-hue-rotate()属性实现酷炫文字特效
hue-rotate()hue-rotate() (en-US) 函数在输入图像上应用色相旋转。angle 一值设定图像会被调整的色环角度值。值为 0deg,则图像无变化。若值未设置值,默认为 0deg。该值虽然没有最大值,超过 360deg 的值相当于又绕一圈。应用实例:<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=u原创 2022-04-22 15:16:24 · 790 阅读 · 0 评论 -
CSS滚动条实现步骤及美化小技巧
css控制的滚动条应该如何实现和隐藏呢?滚动条能不能换颜色或者做的更好看一些。1、overflow-y : 设置当对象的内容超过其指定高度时如何管理内容;overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容。参数:visible:扩大面积以显示所有内容auto:仅当内容超出限定值时添加滚动条hidden:总是隐藏滚动条scroll:总是显示滚动条2、height : 设置滚动条的高度(修改其后数值即可)。3、滚动条颜色参数设置:scrollb原创 2022-04-17 14:54:54 · 573 阅读 · 0 评论 -
强制换行</br>标签以及\n换行符在交互中的使用
在这里给大家介绍个好朋友</br>标签,我记得有句话叫:如果有地方需要强制换行,那我们使用br标签即可。由此可见,br标签是很多人都喜欢用的换行标签,无论你是强制换行还是非强制换行都可以用的一种标签。...原创 2022-03-29 23:45:20 · 3052 阅读 · 0 评论 -
HTML+CSS画个太阳
基础版CSS:html,body{ margin: 0; padding: 0;}body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: gray;}.sun{ width: 10em; height: 10em; /* 将正方形四直角改为圆角成 圆 */ border-radius: 50%; /* 为太原创 2022-03-20 21:10:12 · 2233 阅读 · 2 评论 -
CSS-左右下角飘带效果
<!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&l原创 2022-03-20 21:06:31 · 178 阅读 · 0 评论 -
情人节-纯CSS实现跳动爱心
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>520</title> <style> * { margin: 0; padding原创 2022-02-13 15:26:50 · 511 阅读 · 0 评论 -
CSS的vertical-align
CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。vertical-align属性可被用于两种环境:使行内元素盒模型与其行内元素容器垂直对齐。例如,用于垂直对齐一行文本内的图片:垂直对齐表格单元内容:注意 vertical-align 只对行内元素、行内块元素和表格单元格元素生效:不能用它垂直对齐块级元素。语法/* Keyword values */vertical-align: baseline;ver原创 2022-01-06 20:56:59 · 226 阅读 · 0 评论 -
CSS行内元素
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:(1)display:inline;转换为行内元素(2)display:block;转换为块状元素(3)display:inline-block;转换为行内块状元素...原创 2022-01-06 20:45:20 · 293 阅读 · 0 评论 -
CSS中line-height属性
line-height CSS 属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素,它用于计算行盒(line box)的高度。CSS Demo: line-heightline-height: normal;line-height: 2.5;line-height: 3em;line-height: 150%;line-height: 32px;语法/* Keyword valu原创 2022-01-06 20:17:43 · 2252 阅读 · 0 评论 -
JavaScript中String.prototype.split()
split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组,以一个指定的分割字串来决定每个拆分的位置。const str = 'The quick brown fox jumps over the lazy dog.';const words = str.split(' ');console.log(words[3]);// expected output: "fox"const chars = str.split('');console.log(chars[8]);原创 2022-01-03 20:51:33 · 675 阅读 · 0 评论 -
CSS中clip-path属性
clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。示例如下:clip-path: circle(40%) ;clip-path: ellipse(130px 140px at 10% 20%);clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');语法原创 2022-01-03 19:37:39 · 492 阅读 · 0 评论 -
CSS中的float属性
float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。浮动元素是 float 的计算值非 none 的元素。由于float意味着使用块布局,它在某些情况下修改display 值的计算值:备注:如果要在 JavaScript 中把float属性当作element.style对象的一个成员来操作,那么在Firefox 34 和更老的版本中,你必须拼写成cssFloat。另外还要注意到在原创 2022-01-02 21:55:21 · 1230 阅读 · 0 评论 -
CSS中的overflow-wrap属性
CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。与word-break相比,overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。注:word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和原创 2022-01-02 20:34:52 · 1518 阅读 · 0 评论 -
CSS3中的box-sizing属性
CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。在 CSS 盒子模型的默认定义里,你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ,绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时,这个特点尤其烦人。box-sizing 属性可以被用来调整这些表现:原创 2022-01-02 19:53:54 · 199 阅读 · 0 评论 -
CSS的repeating-radial-gradient()属性-径向渐变
创建由重复的,从原点放射渐变的图像。它类似于并采用相同的参数,但它在所有方向上无限重复颜色停止以覆盖其整个容器.demo如下:background: repeating-radial-gradient(#e66465, #9198e5 20%);图片显示如下:background: repeating-radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);图片显示如下:background: repeating-radial-g原创 2022-01-02 16:31:56 · 1237 阅读 · 0 评论 -
原生css-旋转圣诞树特效
<!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>山羊原创 2021-12-22 17:52:09 · 728 阅读 · 3 评论 -
CSS transform 属性
语法CSStransform属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。/* Keyword values */transform: none;/* Function values */transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);transform: translate(12px, 50%);transform: translateX(2em);transform: translateY(原创 2021-12-22 17:41:10 · 116 阅读 · 0 评论 -
CSS中transform-origin
transform-origin CSS属性让你更改一个元素变形的原点。转换起点是应用转换的点。例如,rotate()函数的转换原点是旋转中心。(这个属性的应用原理是先用这个属性的赋值转换该元素,进行变形,然后再用这个属性的值把元素转换回去)默认的转换原点是 center语法/* One-value syntax */transform-origin: 2px;transform-origin: bottom;/* x-offset | y-offset */transform-origi原创 2021-12-22 17:32:49 · 199 阅读 · 0 评论 -
Sass - &引用父选择器
描述:您可以使用&字符选择父级选择器。 它告诉父选择器应该插入的位置。例一:&在前h3 { font-size: 20px margin-bottom: 10px &.some-selector { font-size: 24px margin-bottom: 20px } } 输出CSS:h3 { font-size: 20px; margin-bottom: 10px; } h3.some-s原创 2021-12-17 20:44:19 · 2160 阅读 · 0 评论 -
复合选择器
复合选择器有三种,分别是后代选择器、交集选择器和并集选择器。比如上图中,.box .spec就是一个后代选择器。它的写法就是,在box类的后面跟一个空格,然后写spec类。既然叫后代选择器,也就是说,spec这个类名所在的标签(儿子),是box这个类名所在的标签(父亲)的子标签。li.spec是一个交集选择器。在这里,li是一个标签选择器,后面紧跟的.spec是一个class选择器,所以li.spec就表示,选择的标签既是一个li标签,同时这个li标签上还有spec类,即这个li标签上有class=原创 2021-12-17 20:37:53 · 140 阅读 · 0 评论 -
CSS 属性选择器的简单应用以及属性选择器 ~=, |=, ^=, $=, *= 的区别
简单属性选择如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。例子 1如果您希望把包含标题(title)的所有元素变为红色,可以写作:*[title] {color:red;}例子 2与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:a[href] {color:red;}例子 3还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:a[h原创 2021-12-17 20:21:48 · 551 阅读 · 0 评论 -
CSS并集/分组选择器
1、 给所有选择器选中的标签设置属性2、连接符:,3、格式:选择器1,选择器2{ 属性: 值;}4、注意点:并集选择器必须使用,(英文逗号)来连接选择器可以使用标签名称/id名称/class名称<head> <meta charset="UTF-8"> <title>Title</title> <style> /* 要求设置p,h1,li,a 的字体颜色为红色原创 2021-12-17 19:56:25 · 301 阅读 · 0 评论 -
CSS常用属性整理
文字属性边框属性尺寸属性背景属性盒子阴影盒子阴影伪类属性css3新增定位属性媒体查询其他样式公共样式原创 2021-12-15 22:27:31 · 73 阅读 · 0 评论 -
CSS text-decoration 属性
定义和用法text-decoration 属性规定添加到文本的修饰。注释:修饰的颜色由 “color” 属性设置。说明这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。...原创 2021-12-14 19:48:52 · 160 阅读 · 0 评论 -
开发常用CSS样式汇总
1、页面动画出现问题在 Chrome 和 Safari 中,当我们使用 CSS 转换或者动画时可能会有页面闪烁的效果,下面的代码可以修复此情况:.cube {-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-perspective: 1000;perspective: 1000;/* Other transform properties here */}在webkit内核的浏览器中,原创 2021-11-22 23:33:38 · 102 阅读 · 0 评论 -
div盒子超出内容变成省略号
第一种方式:li{white-space:nowrap;强制不换行;overflow:hidden;超出的部分隐藏;text-overflow:ellipsis;让隐藏的文本用省略号的方式显示出来}在li上的文本超出的以省略号形式显示第二种方式:div{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1; 设置只显示一行,超出一行的就不显示overflow:hidden; 超出设原创 2021-10-21 11:55:39 · 2680 阅读 · 0 评论 -
CSS常用样式-个人页面圆形头像
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ margin: 0; top: 0; } .box{ width: 100%; height: 750px; background:blue;原创 2021-08-17 13:40:24 · 378 阅读 · 0 评论 -
CSS中position属性(sticky)
position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性。1、position: staticstatic(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。2、position: relativerelative(相对定位)是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原原创 2021-05-23 20:36:46 · 1396 阅读 · 0 评论 -
行内元素,块级元素,替换元素,非替换元素
常见的行内元素和块级元素都有哪些?行内元素 inline不能设置宽高,不能自动换行span、input、img、textarea、label、select块级元素block可以设置宽高,会自动换行p、h1/h2/h3/h4/h5、div、ul、li、tableinline-block可以设置宽高,会自动换行常见的替换元素和非替换元素?替换元素是指若标签的属性可以改变标签的显示方式就是替换元素,比如input的type属性不同会有不同的展现,img的src等img、input、if原创 2021-03-13 17:03:14 · 154 阅读 · 0 评论 -
CSS如何清除浮动?
浮动是什么?W3school中给出的浮动定义为浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CS原创 2021-03-09 21:24:12 · 79 阅读 · 0 评论 -
常见的响应式布局有哪些?
实现响应式布局的三种方式CSS3-Media Query(最简单的方式,但是无法满足很多需求)借助原生Javascript(成本高,不推荐使用)第三方开源框架(比如bootstrap,可以很好的支持浏览器的响应式布局)...原创 2021-03-08 19:43:42 · 375 阅读 · 0 评论 -
什么是响应式布局?
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。优点和缺点优点:面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点:兼容各种设备工作量大,原创 2021-03-08 19:37:19 · 149 阅读 · 0 评论 -
前端开发_浏览器兼容问题(2)
cursor:hand VS cursor:pointerfirefox不支持hand,但ie支持pointer解决方法: 统一使用pointerinnerText在IE中能正常工作,但在FireFox中却不行.需用textContent。解决方法:if(navigator.appName.indexOf("Explorer") > -1){document.getElementById('element').innerText = "my text";} else{docu.原创 2021-03-08 15:44:14 · 112 阅读 · 0 评论 -
CSS中link和@import的区别?CSS的样式优先级?
link和@import的区别?CSS 选择器的权重高,即选择器的优先级高。本质上,这两种方式都是为了加载css文件,但还是存在细微的差别。差别1:老祖宗的差别,link属于XHTML标签,而@import完全是css提供的一种方式。link标签除了可以加载css外,还可以做很多其他的事情,比如定义RSS,定义rel连接属性等,@import只能加载CSS。差别2:加载顺序的差别:当一个页面被夹在的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到原创 2021-03-02 22:08:50 · 661 阅读 · 0 评论 -
CSS3 animation动画
CSS3关键帧和动画CSS3动画动画可以让元素从一种风格逐渐变为另一种风格。您可以根据需要更改任意数量的CSS属性。关键帧将保存元素在特定时间的样式。@keyframes规则中指定CSS样式时,动画将在某些时间从当前样式逐渐变为新样式。要使动画起作用,必须将动画绑定到元素。以下示例将循环更改元素的背景颜色:代码示例如下:<!DOCTYPE html><html...原创 2021-02-22 13:54:12 · 244 阅读 · 0 评论 -
前端CSS_如何让元素水平垂直居中?
居中效果在CSS中很是普通的效果,居中效果主要分为三大类:水平居中、垂直居中和水平垂直居中。常用的水平居中的实现方案如下,给定一个显示的宽度,将margin左右值设置为auto。如下:.textCenter { width: 1000px; margin-left: auto; margin-right: auto;} 但是在很多情况之下,我们是无法确定元素容器的宽度。当未有明确宽度的时候,上面的方法便无法让我们实现元素水平居中。废话不话,设计一个页面效果如下:HTM原创 2021-02-21 16:16:43 · 172 阅读 · 2 评论 -
CSS条纹状爱心动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ pad原创 2021-01-31 19:32:08 · 82 阅读 · 0 评论 -
CSS_rotate应用按钮右三角形样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {原创 2020-12-20 17:48:38 · 141 阅读 · 0 评论