css
@红@旗下的小兵
求知若渴 虚心若愚
展开
-
css多行实现打点
针对现代浏览器、移动端、小程序实现多行打点:<style>.box{ width: 200px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}</style><div class="box">旗下拥有:专业的中文IT技术社区: CSDN.NET;移动端开发者专属APP: CSD原创 2020-06-05 09:40:38 · 1007 阅读 · 0 评论 -
css filter 滤镜
filter注:filter 属性 目前已经完全可以在实际项目中应用,只要你的项目不需要兼容IE和Edge,例如中后台和内部系统,移动端项目等,可以放心使用。1、滤镜模糊 blur(10px) 范围: 0px ~通常用在背景图片模糊上。值越大,模糊半径越大<style>.box{ width: 100px;height: 100px;background: #1a202e;padding: 50px; filter: blur(5px);...原创 2020-06-01 18:53:40 · 249 阅读 · 0 评论 -
标签属性 dir
dir属性时可以改变文档流的水平流动方向,设计初衷是用在多语言处理中。如:英文和中文的阅读是从左忘右,阿拉伯语则是从右往左。3个属性值:ltr - 文档从左往右排列rtl - 文档从右往左排列auto - 浏览器自己决定排列方式<style> .wra{ width: 400px; border: 1px solid #cc511c; } .box{ display: inline-blo.原创 2020-05-31 21:49:25 · 408 阅读 · 0 评论 -
div 模拟textarea文本域实现可编辑且高度自适应
看到标题很多人想用只能用js来实现吧!今天介绍一个标签属性可以让一个block块元素实现可编辑,且高度随内容自适应。contenteditable ="true/false"定义:顾名思义,允许用户编辑元素内容,包含任意文本,且包含子元素。使用:给一个普通的block元素,加上contenteditable="true" 即可:<div style="width: 150px;" contenteditable="true">我是一个div</div>.原创 2020-05-31 21:08:00 · 919 阅读 · 0 评论 -
css columns
在不适用flex布局情况下,实现元素两端对齐:使用1、columns: width count;多栏布局width: 列宽度count: 几列2、column-gap:20px列之间的宽度。3、column-rule: 2px solid color;列与列之间的边框宽度、边框样式、边框颜色;(类似border)tips: 三个属性是作用在父级上的,对里边的子级元素 或者文本 进行多栏布局。例一:实现3列元素,两端对齐,中间间隔20px<sty...原创 2020-05-31 19:23:20 · 226 阅读 · 0 评论 -
css控制背景图片不随滚动条滚动
背景属性 background-attachment: fied 可以让背景图片固定:(小技巧:让元素占满整个屏,如下)<template> <div class="ranking"> <div> <div v-for="i in 50">{{i+'200000'}}</div> </div> </div></template&原创 2020-05-21 18:11:26 · 637 阅读 · 0 评论 -
css小常识
已定义好的选择器:root - 将样式绑定到页面的根元素中:not - 排除某个选择器样式.span:not(:nth-of-type(1)){ // 除了第一个元素 其他span 颜色变为红色 color: red;}:empty - 使用该选择器来制定当元素内容为空白时使用的样式.span:empty{ display: block; width: 100px; height: 100px; ...原创 2020-05-09 17:37:43 · 219 阅读 · 0 评论 -
css背景图片模糊
移动端开发中经常会碰到图片模糊的需求,比如,下边是网易云音乐歌单详情的效果:模糊图片时背景图片,我们以小程序为例,实现上边效果:wxml:背景图片之所以要写在标签中,可以作为可复用页面,动态切换图片地址。<view> <view class="bg-img-box"> <view class="bg-img" ...原创 2020-01-29 17:50:12 · 2818 阅读 · 0 评论 -
css父子级都设置定位如何撑开父级
最近做项目,遇到一个问题,父级设置的相对定位,子级设置绝对定位,如果不给父级设置高度,它的高度为0,如何撑开父级d的高度呢???目前我的解决办法是子级也换成绝对定位,完美解决:<style>.wra{ position: relative;}.box{ position: relative; width:100px; height:200...原创 2019-09-30 16:34:54 · 3898 阅读 · 0 评论 -
flex布局
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。项目默认方向是按照主轴排列的。容器的属性:*****************************...原创 2019-09-27 16:13:57 · 211 阅读 · 0 评论 -
css3—transform
tranform英文意思是:改变,使··· 变形;transform有四个属性分别来看下:1、旋转transform:rotate(xxxdeg);使元素旋转多少度,正数为顺时针旋转多少度;负数为逆时针旋转多少度。实际案例:鼠标hover,小三角旋转360°<style>.box{ position: relative; width:1...原创 2019-09-15 19:43:19 · 572 阅读 · 0 评论 -
css3—animation动画和transition详解(最新)
animation和transition两个属性在网页制作时候用到频率非常之高!这篇文章来详细记录下两者的用法:一、animation动画(1)定义:帧动画,所谓的帧动画就是不仅有开始和结束状态,还可以用关键帧来定义中间的状态,能做出非常复杂的动画。。。用@keyframes 来创建animation的关键帧:@keyframes run { from{} 50%{} ...原创 2019-09-15 18:22:09 · 846 阅读 · 0 评论