CSS
想要成仙的菜鸟前端
这个作者很懒,什么都没留下…
展开
-
值班日历实现不同人显示不同的颜色区别
值班日历实现不同值班人显示不同的颜色区别显示原创 2023-12-04 17:21:49 · 507 阅读 · 0 评论 -
媒体查询自适应大小屏幕(更换布局)
媒体查询自适应布局原创 2023-01-13 10:55:07 · 893 阅读 · 0 评论 -
css实现六边形
css实现六边形原创 2022-08-10 11:04:25 · 515 阅读 · 0 评论 -
css实现毛玻璃效果
css实现毛玻璃效果转载 2022-08-03 16:06:16 · 6121 阅读 · 0 评论 -
css实现一行四个元素动态布局
主要用到的是flex布局,还有css3的伪类选择器。多复习巩固啊。。。。<ul class="center-ads-list"> <li> <a href="/"> <img alt="" src="https://res.vmallres.com/pimages//pages/picImages/93724597641619542739.png">原创 2021-03-31 18:33:25 · 5813 阅读 · 0 评论 -
margin与padding区别
盒子模型都知道,但是具体margin和padding都是可以撑开(表面上)与父亲节点或者兄弟节点的距离,用来页面布局。没什么区别,但是有时候就是会遇到一些奇奇怪怪的样式布局bug,导致改样式,实在觉得有点晕头转向,感觉总是搞不清楚。归根结底还是这两者在用法上的区别没有搞很明白,这两者常见的bug场景总结如下:marginmargin : 0 auto; 只对块级元素起作用。(diaplay:block; 行内和行内块都不起作用)margin在块级元素下,上下左右可随意设定,且块级元素的margin的原创 2020-12-01 17:35:08 · 661 阅读 · 0 评论 -
CSS实现 文字渐变色 的两种方式(亲试有效)
转载:https://blog.csdn.net/Zckguiying/article/details/86528732方式一效果图这里写图片描述代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> span { background: linear-gradient(to right, red, blue);转载 2020-09-23 17:30:52 · 2165 阅读 · 0 评论 -
css日常笔记
透明非ie浏览器透明属性:opacity:0.3;兼容ie浏览器透明属性:filter:Alpha(opacity=0.3);禁用新属性:pointer-event:none; css3属性, ie11+才支持说明:元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦原创 2020-06-17 10:28:11 · 124 阅读 · 0 评论 -
禁用鼠标cusor:no-drop与cursor:not-allowed区别与认识
之前我一直使用的禁用鼠标都是 cusor:no-drop; 今天翻看项目,发现项目中封装的都是使用的 cursor:not-allowed;于是百度了一下,发现w3cSchool 上的 cursor属性 竟然没有 no-drop 和 not-allowed 。一脸懵。。。又百度了一下,MDN上,发现有这两个属性,于是就纳闷了,为什么 这两个都可以实现同样的功能,要有两个属性呢?百度了一下,网上有人说了他的区别:它们在语义上是不同的,允许浏览器和/或系统为每种情况实现不同的图形. no-drop意味着原创 2020-06-02 20:11:24 · 3656 阅读 · 0 评论 -
CSS属性caret-color
改变输入框光标颜色,同时又不改变输入框里面的内容的颜色 input{ color:blue; caret-color: red;}微信小程序中使用,不起作用。支付宝小程序中可以起作用?????...原创 2020-02-15 23:07:37 · 569 阅读 · 0 评论 -
CSS清除浮动方法总结
父级 div 定义 height原理:父级 div 手动定义 height,就解决了父级 div 无法自动获取到高度的问题。 简单、代码少、 容易掌握 ,但只适合高度固定的布局结尾处加空 div 标签 clear:both原理:在浮动元素的后面添加一个空 div 兄弟元素,利用 css 提高的 clear:both 清除浮动,让父级 div 能自动获取到高度 ,如果页面浮动布局多,就要增...原创 2020-01-04 16:42:24 · 111 阅读 · 0 评论 -
css实现一个盒子垂直居中所有方法总结
absolute + transform.prent{ position:relative;}.child{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}display:table; + text-align + table-cell + vertical-align(单元格方式)...原创 2020-01-03 11:33:54 · 637 阅读 · 0 评论 -
只使用CSS实现鼠标滑过一个元素控制另一个元素的显示与否
<style type="text/css"> .container { width: 400px; height: 200px; border: 2px solid #ff0000; } .cu_toolbar { background-color: #8bb907; ...转载 2020-01-02 16:48:20 · 2922 阅读 · 0 评论 -
css实现:after中使用图片
先看一下效果:下面是代码实现:.xin { position: relative; font-size: 20rpx; color: #15bf5d; border: 1rpx dashed #ccc; padding-top: 20rpx;}.xin::after { content: ''; background: url(https://etc-app...原创 2019-12-25 11:58:22 · 10464 阅读 · 0 评论 -
CSS开发笔记总结
使用 background-blend-mode 实现 文字与图片正片叠底的效果文本自动换行开发中经常使用的就是最好不要把一个 view 高度写死。我一般做的就是给view固定的padding 值,让其有一定的高度。这样做是为了,有些地方用户输入的数据可能会很多,如果高度定死,就会出现被遮盖显示不全的问题。想要文本自动换行,除了不要固定写死高度之外,如果遇到,一长串的英文字符。默认没有空格的...原创 2019-11-05 16:48:52 · 90 阅读 · 0 评论 -
css手写三角形
// 倒三角 width: 0rpx; height: 0rpx; border-right: 8px solid transparent; border-left: 8px solid transparent; border-top: 8px solid #ccc; // 如果是border-bottom:8px solid #ccc; 就是正三角了...原创 2019-11-05 16:07:09 · 555 阅读 · 0 评论