css3
汉武大帝·
我是攻城狮
展开
-
css3 属性 backface-visibility 的实践应用
backface-visibility` 是一个用于控制元素在面对屏幕不同方向时的可见性的CSS3特性。原创 2024-02-01 09:42:37 · 689 阅读 · 0 评论 -
css3画一个五角星 ,三角形,圆形
【代码】css3画一个五角星 ,三角形,圆形。原创 2023-05-25 16:24:48 · 437 阅读 · 2 评论 -
使用css3画一个旋转的苹果
使用css3画一个旋转的苹果原创 2022-12-02 17:55:49 · 190 阅读 · 0 评论 -
对于高度不确定,想要有过渡效果的解决方法
高度不确定,想要有过渡效果原创 2022-04-18 11:10:40 · 897 阅读 · 0 评论 -
css设置小字号与大字号文字底部对齐
先看效果:解决方式:设置 小字号文字的样式,// 字号自己调节:font-size:12px;vertical-align: sub;原创 2021-07-06 14:18:48 · 778 阅读 · 0 评论 -
使用CSS的pointer-events属性实现鼠标穿透效果
先看效果:使用pointer-events之前:(红色框的是覆盖在表格上面的一个div,淡蓝色单元格是可以点击的而且鼠标是小手的形状,红框覆盖在单元格上面,将淡蓝色单元格盖住, 鼠标hover在淡蓝色单元格上面也不是小手了)使用 css的pointer-events后(鼠标hover在红框上时,鼠标也显示小手了): <div :style="{position:'absolute',left:'123px',top:'39px','pointer-events': 'none原创 2020-12-24 14:29:24 · 793 阅读 · 0 评论 -
input输入框输入数值后,设置背景颜色为透明
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-transition-delay:111111s;-webkit-transition:color11111sease-out,background-color111111sease...原创 2020-12-23 10:11:51 · 2510 阅读 · 1 评论 -
css实现div一半是黑色,一半是红色;实现三角形效果
1,先看效果:css样式以及html: .div{ width:200px; height:100px; background:linear-gradient(to right , red 0%, red 50%, black 50%, black 100% ); } <div class="div"></div>2,三角形效果:css以及html: .div2原创 2020-11-08 22:09:58 · 2205 阅读 · 0 评论 -
css设置文字两端对齐
文字两端对齐设置:text-align: justify;原创 2020-08-13 12:41:23 · 809 阅读 · 2 评论 -
css中如何定义变量并使用
CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*) ;其中*表示我们的变量名称;vue项目中定义css全局变量的话:1,首先在assets目录下新建index.css文件:2,然后在main.js文件中引入:3,使用:在 .vue文件中的style 中使用:background:var(--baseBackground);更多介绍:css中定义变量定义变量可分多种情况:1、定义全局变量:root { --borderColor: #...原创 2020-06-18 18:20:58 · 9855 阅读 · 0 评论 -
使用calc不管用时,需要注意的坑
先说问题:在使用calc时,使用的格式如下:width:calc(100%-100px); 结果不管用,改成 width:calc(100% - 100px); 即可管用(减号左右要有空格才行); +和-运算符的两边必须要有空白字符。比如,calc(50% -8px)会被解析成为一个无效的表达式,解析结果是:一个百分比 后跟一个负数长度值。而加有空白字符的、有效的表达式calc(8px + -50%)会被解析成为:一个长度 后跟一个加号 再跟一个负百分比。 *和/这两个运算...原创 2020-06-18 17:10:47 · 6148 阅读 · 3 评论 -
css实现左,右箭头按钮
先看效果图:实现效果的css样式如下:<!-- 左箭头 --><div style="width:50px;height:50px;background:blue;margin:10% 0 0 10%;"> <div style="position: relative;top: 27%;left: 31%;width:20px;height:20p...原创 2020-01-02 13:50:39 · 3258 阅读 · 0 评论 -
只显示一行,超出用点表示。显示两行,超出用点表示。
只显示一行,超出用点表示。 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;显示两行,超出用点表示。 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; ...原创 2019-11-07 19:27:37 · 1579 阅读 · 0 评论 -
CSS3 新特性
选择器 背景和边框 文本效果 2D/3D 转换 动画、过渡 多列布局 用户界面选择器:last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */:nth-child(1) /* 按照第几个孩子给它设置样式 */:nth-child(even) /* 按照偶数 */:nth-child(odd) /* 按照奇数 */...原创 2019-07-16 19:58:16 · 142 阅读 · 0 评论