CSS
11
冷子夜
渭城朝雨浥轻尘,客舍青青柳色新
展开
-
CSS ios 父元素 border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题
在父元素上加上这段代码 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); -webkit-mask-image: -webkit-radial-gradient(white原创 2021-03-08 16:39:16 · 645 阅读 · 1 评论 -
iconfont svg图标引用后不能用fill更改颜色的解决方法
用iconfont自带的批量去色功能解决今天在使用 Symbol 代码引用图标时发现,设置颜色后,有一部分图标还是显示原始的颜色。原来这部分 svg图标带有 fill 属性,这种图标不能本地修改 fill 属性,需要在项目中移除默认颜色。...原创 2021-01-27 17:21:25 · 4215 阅读 · 0 评论 -
购物优惠券样式demo
效果资源html <div class="info flex coupon_parent"> <div class="left flex"> <p class="p1">优惠券</p> <div class="p2 coupon_box flex"> <div class="left flex_col"> <div class="原创 2020-12-23 16:34:48 · 199 阅读 · 0 评论 -
absolute定位css元素居中的两种方法
1(上下左右居中,不能微调)position:absolute;left:0; right:0; top:0; bottom:0;margin:auto;2(上下左右居中,可微调)position:absolute;top:50%; left:50%;margin-top:-100px;(元素高度的一半)margin-left:-100px;(元素宽度的一半)3 横向居中position:absolute;left:calc(50% - 元素宽度一半);...原创 2020-11-27 17:42:35 · 16310 阅读 · 1 评论 -
html2canvas应用问题概览
问题1使用以下省略文本样式,会绘制不出来 white-space: normal; /** 不能设置为这个 white-space:nowrap; 这个意思为不换行 **/ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排原创 2020-10-10 14:43:15 · 406 阅读 · 0 评论 -
引入Vant组件并改变其样式
在加了scoped的style中重写样式 失效,因此另加一个不带scoped 的 style即可<style lang="scss">.main_page_process { //vant 组件类名 .van-progress__portion { box-shadow: 0px 6px 12px 0px rgba(255, 102, 102, 0.5) !important; }}.baby_desc_swiper { //vant 组件类名 .van-swip原创 2020-08-14 16:57:14 · 1866 阅读 · 0 评论 -
利用mask-image实现图片显示部分进度
效果图code<html> <header> <style> .demo { position: relative; } .icon { width: 100px; } .icon2 { position: absolute; left: 0; top: 0; width: 100px;原创 2020-08-07 18:19:11 · 398 阅读 · 0 评论 -
如何v-html 内的元素加样式
使用 ::v-deephtml<div id="rich_text" v-html="content" class="desc content"></div>CSS #rich_text { ::v-deep p { margin: 32px 32px 0; font-size: 28px; font-family: PingFangSC-Regular, PingFang SC; font-weight:原创 2020-08-03 14:14:55 · 650 阅读 · 0 评论 -
swiper轮播图在vue中实现显示3张图片,一个完整的两边显示一半
这里是引用https://blog.csdn.net/weixin_44237806/article/details/100141698安装 yarn add swiper vue-awesome-swiper引用局部引用import Swiper from 'swiper/swiper-bundle.min.js'import 'swiper/swiper-bundle.min.css'swiper效果图,图片路径自己更改吧这个<template> <.转载 2020-07-20 14:46:04 · 5390 阅读 · 6 评论 -
vue 父子元素都有滚动,父子元素各自滚动,相互不影响
<div class="menus" @touchmove.stop></div>原创 2020-07-02 16:22:05 · 1876 阅读 · 0 评论 -
input输入框在ios中光标及字体不居中
如何解决input输入框在ios中光标及字体不居中的问题;问题根本:不要使用line-height垂直居中。解决方法:可直接定义height,然后高度由上下padding值撑开。input { font-size: 1.6rem; height: 1.6rem; padding: 1rem 0;}这里是引用章鱼不丸子:http://blog.csdn.net/yuki_haha/article/details/72639786的博客...原创 2020-06-29 09:52:30 · 1073 阅读 · 0 评论 -
用mask-image做弹幕阴影、歌词滚动阴影、加载进度
弹幕阴影,歌词滚动阴影加载进度(待完成)做弹幕阴影,歌词滚动阴影效果如下直接看代码 <div class="barrage" ref="barrage"> <div class="barrage_wrap"> <div class="bar_block" v-for="(item, index) in barrageList" :key="index"> <div class="barragediv.原创 2020-06-12 09:53:05 · 286 阅读 · 0 评论 -
CSS-BEM 命名规范
官网原创 2020-06-10 20:39:16 · 140 阅读 · 0 评论 -
Android webview加载img 或 background-image出现错乱的问题
最近开发网页用到如下css.demo { background: #fff url(../img/qbank_stu_bandui.png) no-repeat center; background-size:1.47rem 1.35rem; width: 2.5rem; height: 2.5rem;}在浏览器显示都正常,但是在Android设备上当页面中图片多了,或者有数学公式...转载 2020-04-20 17:29:37 · 463 阅读 · 0 评论 -
css 强制不换行,保持在一行显示
css中强制不换行,文本不会换行,文本会在在同一行上继续,直到遇到<br>标签为止。white-space:nowrap;css中强制不换行,文本不会换行,文本会在在同一行上继续,直到遇到<br>标签为止。...原创 2020-04-03 16:38:50 · 9457 阅读 · 0 评论 -
小程序怎么处理2x,3x图?
1.wxss的解决办法(推荐)@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ .imgTest{ background: url(../images/2x.png) no-repeat; } } @media (-webkit-min-device-pixel-ratio:...原创 2019-10-28 19:19:09 · 3088 阅读 · 0 评论 -
vue.js 动态文字向上滚动广播中奖信息代码
????????????个人博客:Harvey的个人博客 ????????????效果如图<template> <div class="roll-msg"> <div class="popup"> <div class="box"> <ul class="lb" :class="{marquee_top:anim...原创 2019-04-18 09:03:19 · 2517 阅读 · 0 评论 -
10 个优秀的占位图片生成服务
Placehold.itA quick and simple image placeholder service.特点:老牌服务,支持 HTTPS可定制:尺寸、颜色、文字、格式http://placehold.it/300x200 http://placehold.it/300x200/09f/fff.png http://placehold.it/300&text=...原创 2019-07-30 14:57:11 · 4988 阅读 · 0 评论 -
粗下划线标题边框底色单图
<view style="display: inline-block;margin-bottom: 1em"> <view style="text-align: center;font-size: 16px;padding: 0px 0.6em;letter-spacing: 1.5px"> <text>估算胎儿体重有什么意...原创 2019-09-16 16:20:11 · 127 阅读 · 0 评论 -
单行文本溢出
white-space:nowrap; width:10em; overflow:hidden; text-overflow: ellipsis;原创 2019-09-16 16:26:55 · 113 阅读 · 0 评论 -
css实现文本两行或多行文本溢出显示省略号
white-space:normal;/** 不能设置为这个 white-space:nowrap; **/ width: 300rpx; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-or...原创 2019-09-16 16:27:49 · 394 阅读 · 0 评论 -
iphone X 刘海屏适配
iphonex 已经上线有一段时间了,作为业界刘海屏幕第一款机型,导致全屏不能正常的全屏显示了,,所以需要对iphonx 适配,下面就详细说说如何适配iphonex 提供的 meta 头<meta name="viewport" content="viewport-fit=contain"> <meta name="viewpo...转载 2019-09-17 17:43:03 · 649 阅读 · 0 评论 -
web进行QQ、QQ空间、微博的分享
参考文章jsp-web端进行QQ和微信的分享 <style type="text/css"> #content-share-list { font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */ width...原创 2019-09-22 17:56:34 · 934 阅读 · 0 评论 -
小程序显示弹窗时禁止下层的内容滚动
小程序显示弹窗时禁止下层的内容滚动1.方式一利用position:fixed. 禁止页面滚动.html<view class="indexPage {{proInfoWindow?'indexFixed':''}}"> -----------此处为整个页面的结构内容 <button catchTap="_proInfoWindowShow">点击显...原创 2019-09-24 17:23:18 · 427 阅读 · 0 评论 -
IOS position:absolute 样式变形,浮动到右边
在一些老的ios系统上,position有兼容问题,一般都是开发人员忘了写top和left属性导致的。(一定要加top 和 left属性).panel { position: absolute; width: 100%; top: 0px; left :0px;}...原创 2019-03-29 14:26:27 · 1728 阅读 · 0 评论