CSS
样式问题
CSS、CSS3上的各种问题
黎轩栀海
只是简单的随心记录,不喜勿喷。。。
展开
-
CSS3 实现边框圆角渐变色&&渐变文字效果
是CSS中的一个属性,用于指定背景图片或颜色的裁剪方式,裁剪的区域是文本的轮廓。具体来说,就是将背景图片或颜色限制在文本的轮廓内,而不是整个元素的范围内。这个属性通常用于创建一些特殊的文本效果,比如文字渐变、文字填充等。原创 2023-07-24 10:06:15 · 852 阅读 · 0 评论 -
CSS 平行四边形样式
CSS 平行四边形样式原创 2023-02-21 15:35:27 · 178 阅读 · 0 评论 -
CSS 取消input的上下箭头
取消input的上下箭头原创 2022-11-09 15:55:51 · 414 阅读 · 0 评论 -
CSS3 pointer-events
CSS新属性pointer-events:字面理解是点击鼠标事件,值分别是auto和none。·pointer-events属性值详解auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了p...原创 2019-04-17 14:30:47 · 1341 阅读 · 0 评论 -
CSS3中 的 calc() 函数
目的是动态改变宽度/高度的变化,适配问题css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少30px。calc()函数用于动态计算长度值。calc()函数支持 "+", "-", "*", "/" 运算;calc()函数使用标准的数学运算优先级规则;注意 : 运算符"+ - * /"左右两边均要留空格 在less中使用以下样式宽度计算错误:width: calc("100% - 30px"); 计算出来是:width: 70%; 分析 : p...原创 2020-12-16 15:00:31 · 2791 阅读 · 0 评论 -
CSS 进度条样式组件
<template> <div> <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}"> <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key...原创 2022-03-22 14:01:24 · 1033 阅读 · 0 评论 -
css3 新特性
1.过渡 transition: CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0)复制代码2.动画 animation:动画名称,一个周期花费时间,运动曲线(默认ease),动画延迟(默认0),播放次数(默认1),是否反向播放动画(默认normal),是否暂停动画(默认running)复制代码3.形状转换 transform:适用于2D或3D转换的元素rotate(30deg); translate(30px,30px); scale(.8); ...转载 2020-07-15 16:37:13 · 130 阅读 · 0 评论 -
CSS box-sizing的使用
定义和用法box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距原创 2021-10-18 17:41:44 · 204 阅读 · 0 评论 -
css 上下漂浮
<h1 class="playful" aria-label="Wash your hands"> <span aria-hidden="true">W</span> <span aria-hidden="true">a</span> <span aria-hidden="true">s</span> <span aria-hidden="true">h...原创 2022-02-14 17:04:21 · 373 阅读 · 0 评论 -
CSS 动态添加class的方式
动态添加class的方式转载 2022-06-17 15:56:39 · 3936 阅读 · 0 评论 -
css 物流样式
<template> <div> <!--物流跟踪--> <div style="width: 92%; margin-left: 4%;margin: auto;padding-left: 15px;padding-right: 15px;"> <div style="font-size: 1.2rem;color: #111111;">物流 <!--物流跟踪--> ...原创 2021-07-12 16:04:10 · 761 阅读 · 1 评论 -
css writing-mode文字竖排
解决英文以及间距问题文字竖排writing-mode: vertical-rl;解决英文竖排问题text-orientation:upright;字间距letter-spacing:8px;writing-mode属性定义及使用说明writing-mode 属性定义了文本在水平或垂直方向上如何排布。语法格式如下:writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl..原创 2021-01-25 16:55:41 · 1418 阅读 · 0 评论 -
Sass 与 Scss
Sass(Syntactically Awesome StyleSheets),是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格,和css编写规范有着很大的出入,是不使用花括号和分号的,所以不被广为接受。Sass是一款强化 CSS 的辅助工具,是对 CSS 的扩展,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports)等高级功能,这些拓展令 CS...原创 2021-11-02 14:45:52 · 3475 阅读 · 0 评论 -
css做三角形
如果现在需要一个尖角朝上的三角形,那么从这四个三角形里面,貌似只有下面这条边框符合我的需求,所以需要把上边框,和左右两条边框的颜色都改成透明的。在这里,透明可以用transparent来表示:.ddd{ width:0; height:0; border-width:100px; border-style:dotted dotted solid dotted...转载 2019-03-19 15:50:42 · 139 阅读 · 0 评论 -
css 一行超出显示省略号 & 多行超出显示省略号
一行超出显示省略号.word{ width: 200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}white-space属性值:normal : 忽略多余的空白,只保留一个空白(默认); pre : 保留空白(类似于html中的pre标签); nowrap : 只保留一个空白,文本不会换行,会在同一行继续,直到遇到br标签为止; pre-wrap : 保留..原创 2021-11-25 14:56:01 · 2975 阅读 · 0 评论 -
微信端 解决长按选中样式问题
user-select的属性值{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}原创 2022-04-15 14:10:16 · 409 阅读 · 0 评论 -
css 滚动条样式和table
1.滚动条美化::-webkit-scrollbar {} //滚动条整体部分 ::-webkit-scrollbar-track{} //滚动条滑轨 ::-webkit-scrollbar-track-piece{} //内层轨道,滚动条中间部分::-webkit-scrollbar-thumb {} //滚动条滑块::-webkit-scrollbar-button{} //滑轨两头的监听按钮::-webkit-scrollbar-button:star.原创 2020-12-18 16:10:19 · 767 阅读 · 1 评论 -
CSS3 动画animation
animation也是一个复合属性,包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode共8个子属性animation-name: 动画名称(默认值为none)animation-duration: 持续时间(默认值为0)an原创 2022-03-10 13:15:41 · 487 阅读 · 0 评论 -
vw vh vm
1、vwcss3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。2、vhcss3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%。举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。...原创 2019-03-15 16:00:10 · 3365 阅读 · 0 评论 -
CSS3实现柱状图的3D立体动画效果
实现的柱状图应该是:背景独立(即柱状图与背景互不影响) 自适应的(柱子数量的多少不会影响布局) 可缩放(如矢量图一样) 易于定制(颜色、尺寸和比例)挑战1 - 带有可伸缩内核的柱子一个柱状图是由6个面组成的立体图形 这个柱状图的内核是可以垂直伸缩的,并且有一个选项可以隐藏它所以,我们需要:一个div,生成柱状图的三个面(背部、底部、左侧) 一个div,生成柱状图的另三个面(正面、顶部、右侧) 一个div,生成内核柱体的三个面,与上面的第二个div类似,但是它的z-index...转载 2020-12-15 17:25:15 · 1076 阅读 · 0 评论 -
CSS video隐藏按钮
//全屏按钮video::-webkit-media-controls-fullscreen-button { display: none;}//播放按钮video::-webkit-media-controls-play-button { display: none;}//进度条video::-webkit-media-controls-timeline { display: none;}//观看的当前时间video::-webkit-media-contro.转载 2022-03-02 11:48:03 · 1135 阅读 · 0 评论